Accessibility in Web development.
Improve your accessibility skills.
One of my goals this year is to write better codes, and one area I have decided to improve is being intentional about making my applications more accessible than ever.
I took time to read a couple of resources, and I will be writing from the lessons I learned. My points will be straightforward because to easily ease people into getting started with accessibility as quickly as possible.
What is Web Accessibility?
According to W3C WAI
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:
- perceive, understand, navigate, and interact with the Web,
- contribute to the Web
Common terms in accessibility
W3C - World Wide Web Consortium is an international community that develops guidelines for how the web should work HTML, XML, CSS, etc...
WAI - The Web Accessibility Initiative is an effort by the W3C to develop standards and support materials to improve the accessibility of the World Wide Web(WWW).
WCAG - Web Content Accessibility Guidelines is a series of guidelines and standards for improving web accessibility. We have the older version WCAG 1.0 and the current guidelines WCAG 2.0
ARIA - Accessibility Rich Internet Applications is a set of roles and attributes that define ways to make web content and web applications more accessible to people with disabilities.
Screen readers - A screen reader is an assistive technology that works with the computer’s Operating System (OS) to provide convert text, buttons, images, icons, and other screen elements into speech. Examples: JAWS, NVDA, Apple offers VoiceOver, and Android has TalkBack.
A11Y - Short form of writing Accessibility, because it’s eleven characters between A to Y.
Accessibility Practice Tips
- Always use HTML Semantic elements.
HTML semantic elements are accessible and do not need accessibility attributes to explain their functions and content. Except for <div> and <span> which are semantic meaningless, and mostly used for layout purposes, Every other element should follow the HTML semantic structure.
- HTML semantic elements should communicate the functional purpose of the content.
Always use HTML elements for their intended purpose. Do not use <p> or <div> or <span> tags as a clickable element when you could use the semantic <button> tag. Do not style a paragraph <p>tag to look like the heading <h1>tag.
- Use one <h1> tag per page.
Each page should have only one <h1> tag. The <h1> tag also serves as a title to indicate a new page, if there are many <h1> tags on a page that confuses the user.
- Do not skip heading levels when increasing.
But you can skip levels when decreasing (h1, h2, h3, h2, h3, h4, h2, h3, h4). Using heading levels appropriately (h1 through h6) makes it easier for users using screen readers to skip through different sections of the page.
Bad
<section>
<h1> First heading tag </h1>
<div>
<h3> Second Paragraph</h3>
</div>
</section>
Good
<section>
<h1> First heading tag </h1>
<div>
<h2> Second Heading</h2>
<h3> Third Heading </h3>
</div
<h2> Second Heading </h2>
</section>- Image alt attribute is essential.
Always include the alt attribute to the image tag. Screen readers use the alt text to describe images to their users. Also,
- Alt text should accurately describe the image displayed.
Good
<img src="images/oscsa-logo" alt="Open innovation logo"/>
Bad
<img src="images/oscsa-logo" alt="logo"/>- All images need an alt attribute, but not all images need alt text. Example: Decorative Images do not need alt text rather the alt attribute should be an empty string. Informative and Active images must have alt text.
Decorative Images(mostly used for aesthetics)
<img src="/images/ring1.png" alt="" />
Informative Images
<img src="images/oscsa-logo" alt="Open innovation logo"/>
Active Images(like buttons)
<img src="images/close-icon" alt="close form modal"/>- Do not include the “image” text in the alt text description, the screen reader already reads it as an image so no need to include it in the text.
Wrong
<img src="images/oscsa-logo" alt="Open innovation logo image"/>- Use aria attribute or screen reader only(sr-only) text.
Aria attributes are useful to add context to an HTML element for screen reader users only. There is a lot of aria attribute suit to support accessibility but it’s important to understand how and when to use them. In most cases, thearia-label ,aria-hidden or sr-only(CSS approach) is used. You can learn more about the difference between aria-label and sr-only here
- Ensure input HTML element has a label.
Labels are useful for screen readers to read information about the input field. See the example below, the label is only visible to screen readers.
<div className="field">
<label className="sr-only" htmlFor="lastname"> lastname </label>
<input
type="text"
placeholder="Last Name"
name="lastname"
required
id="lastname"
/>
</div>A sample code in React.
// signup.tsx file
function Signup() {
const Spinner({ width, height,color }) => {
return (
// aria-label used here to add content to describe the element
<div aria-label="loading content" className="spinner">
<div
style={{ width: width, height: height , borderColor: color?"#009985":" #ffffff"}}
className="spinner__animate">
</div>
</div>
);
}
return (
<>
{loading ? (
<Spinner width="100px" height="100px" color />
) : (
<section className="signup">
<h1 className="signup__heading">Sign Up to MOOCs</h1>
<div className="signup__google">
<button
className="signup__google__login-btn"
onClick={() => googlelogin()}
>
Sign in with Google <FcGoogle />
</button>
</div>
<div className="signup__hr-line">
{" "}
<hr />
<h2 className="signup__hr-line__or">OR</h2>
<hr />
</div>
<form
className="signup__form"
onSubmit={signupHandler}
method="POST"
>
<div className="signup__form-namefield">
<div className="field">
// sr-only used for labels, the labels are visible only to screen readers
<label className="sr-only" htmlFor="firstname">
Firstname
</label>
<input
type="text"
placeholder="First Name"
name="firstname"
id="firstname"
required
/>
</div>
<div className="field">
<label className="sr-only" htmlFor="lastname">
lastname
</label>
<input
type="text"
placeholder="Last Name"
name="lastname"
required
id="lastname"
/>
</div>
</div>
<div className="field">
<label className="sr-only" htmlFor="email">
Email
</label>
<input
type="email"
placeholder="Email"
name="email"
id="email"
required
/>
</div>
<div className="field">
<label className="sr-only" htmlFor="password">
Password
</label>
<input
type={toggleVisibility ? "text" : "password"}
placeholder="Password"
minLength={8}
name="password"
id="password"
required
/>
<button
type="button"
// aria-label added to the button tag
aria-label="toggle password"
className="icon-button eye-icon"
onClick={() => setToggleVisibility(!toggleVisibility)}
>
{toggleVisibility ? (
<MdOutlineVisibility />
) : (
<MdOutlineVisibilityOff />
)}
</button>
</div>
<div className="field">
<label className="sr-only" htmlFor="confirmpassword">
Confirm password
</label>
<input
type={toggleVisibility ? "text" : "password"}
placeholder="Confirm Password"
minLength={8}
className={`${checkpassword && "password-check"}`}
required
name="confirmpassword"
id="confirmpassword"
/>
</div>
<div className="field button-field">
<button>
{isLoading ? <Spinner width="30px" height="30px" /> : "Sign Up"}
</button>
</div>
</form>
<div className="signup__bottom">
<div className="signup__bottom-content">
Already have an Account?
<Link to="/login" className="signup__bottom-content__link">
Login
</Link>
</div>
</div>
</section>
)}
</>
);
}
export default Signup;.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
Testing for accessibility
It’s not easy to have one hundred percent accessibility in your application but there are great tools to test and assist in improving accessibility. Examples include:
- Lighthouse — A Chrome DevTools that provides fast checks on Web applications, measures page performances, accessibility, and more. It also offers suggestions on how to improve the page.
- Siteimprove Accessibility Checker
- DomainAccessibilityAudit
- Accessibility insights for web
Conclusion
I hope you find the article useful. Learning accessibility is a continuous effort and just like coding gets better with practice. Following the guidelines in this article is a great step toward practicing accessibility. There are more rules out there but this is also a good place to start. Feel free to drop comments and suggestions.
