Ensure Everyone Can Access Your Content and Applications
Accessibility shouldn't be an afterthought. Even if your company is a start-up, at some point during a potential aquisition, questions may arise on how long it will take to get your products into compliance. If you haven't started thinking about accessiblity yet, things could get expensive. Luckily, if your designers and developers keep an eye out for some common pitfalls, you can avoid some serious tech debt.
§ Properly account for Title and Header
It's very easy to overlook the layout of your web app. How is this presented to a screenreader? Is the document laid out in a way that makes sense?
You've spent a lot of time on your company's logo, but does everyone know it's an <H1>? You were a smart cookie to use SVG, but are the accessiblity rules the same as they are with regular images? Not quite.
A screenreader will easily get tripped up over an non-descriptive XML file. To ensure your file has the necessary properties, open your SVG file and look at the start of the file. At the beginning of your file, add an attribute to <svg> called "aria-labelledby". Declare its value as "title". Just after your <svg> tag, include an element called <title>, and include your website title here.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg aria-labelledby="title" width="100%" height="100%" viewBox="0 0 2937 417" version="1.1" >
<title id="title" lang="en">Turochamp</title>Nice. So, now you've successfully laid out your navigation bar and it's responsive, but in your excitement over its presentation did you leave out the <H1>?
<h1>
<a aria-describedby="TuroChamp" href="/">
<TuroChampLogo className="brand-logo" />
</a>
</h1>Other resources: SVG & Icon Fonts
§ Navigation & ARIA Hidden
Properly marked navigation is critical. You remembered to wrap your main navigation with <nav>. But did you remember your navigation at the bottom? Did you also wrap this for your Previous and Next button or anything that directs the user through the app?
- Every navigating element should be wrapped with a <Nav> tag. Lists and nested lists should be used for intricate site layouts.
Are you making sure elements that are invisible to sighted users are not being caught by screenreaders?
In this case, we have a list item that's part of a navigation. If the page is the first of many, we don't want the Previous button to show. We don't want it to show up in the DOM inadvertently and cause confusion. A javascript ternary is demonstrated below hiding the wrapping <li> so it does not get improperly read.
<li
aria-hidden={isFirst ? 'true' : 'false'}
className="paginationNav__section smallWidth">
{!isFirst && (
<PaginationButton
href={prevPage}
buttonContent="Previous"
buttonPosition="left"
buttonSize="small"
/>
)}
</li>