Redesign: Accessibility Notes
In a previous post, I wrote about the design and build process of my Portfolio’s redesign. This is an expansion on some of the accessibility problems I solved while designing and building this site.
Accessibility-First Web Design
Accessibility-first design is a design process that considers how users with different disabilities will navigate and use your website. Thinking about accessibility from the very beginning helps to avoid (or reduce) design problems that unintentionally impair people who use assistive technologies (and/or have other disabilities) from successfully using your site.
Accessibility Considerations
Below is an outline of the design decisions I made to follow accessibility best-practices during my site redesign and build:
- Text
- I chose font families, sizes, line widths and heights that optimize readability: The body text is Oxygen Font Family 18px, normal weight with an adjusted line height and made sure that no blocks of text would exceed 900px wide.
- I chose font families, sizes, line widths and heights that optimize readability: The body text is Oxygen Font Family 18px, normal weight with an adjusted line height and made sure that no blocks of text would exceed 900px wide.
- Color Contrast
- I used color contrast checkers to make sure that the contrast between background color and text color followed accessibility guidelines.
- I used color contrast checkers to make sure that the contrast between background color and text color followed accessibility guidelines.
- Alt text
- All images have alt text or an alt text default for screen reader accessibility.
- All images have alt text or an alt text default for screen reader accessibility.
- HTML Structure
- Headings follow correct nesting order and aria labels are used on elements that have hide/reveal interactions.
- Headings follow correct nesting order and aria labels are used on elements that have hide/reveal interactions.
- Home Page
- The home page desktop design has sections that slide-in and out. I have written JavaScript that handles keyboard, touch and click events to make sure that the experience is the same for all users.
- I also wrote JavaScript that handles tab order so that when panels are revealed the focus moves to the appropriate position, when they are closed the focus returns to the last navigation item.
- Hamburger Menu
- I made sure that keyboard users can skip, open and close the main hamburger menu on the Portfolio and Blog pages of the site.
- I made sure that keyboard users can skip, open and close the main hamburger menu on the Portfolio and Blog pages of the site.
- Slide shows
- Slide shows can be navigated using keyboard tabbing.
Comments
Add comment about the post