Repository navigation
Create a Guide/Template: UX/UI Accessibility Standards #134
Description
Overview
We need to create a guide for UX/UI Accessibility so that designers at Hack for LA can ensure their projects follow accessibility standards
Action Items
The phases in the guide-making process are listed below. Each phase displayed in blue is linked to a wiki page with instructions on how to complete that phase. Open the wiki page in a new tab, copy the instructions for each part into the section labeled 'Tasks' at the bottom of this issue, and complete each task listed.
- Gather Examples Solo (open in a new tab)
- Gather Examples Collaboratively
- Create a Guide Draft
- If needed, create a template
- Have your guide peer reviewed
- Present your guide for leadership review
Resources/Instructions
-
Google Drive Folder for this Guide’s documents and shortcuts (to documents in other locations)
0134 UX/UI Accessibility Standards -
Draft How to UI/UX ACCESSIBILITY GUIDE - LAST UPDATE 08-13-2021
-
accessibility guidance as part of the Design Systems project research
Projects to Check
Tasks
- This is where you will copy instructions from the wiki page for the step you are currently on.
Activity
ExperimentsInHonesty commentedon Feb 23, 2021
Previous Draft as of Feb 23, 2021
Overview
There are more than 100 accessibility testing tools. Figuring out which ones to use can be a black hole. For guidance we recommend this article: Which accessibility testing tool should you use?
Summary of Article
The author recommends using the tools in the following order fixing as you go along, since no one tool catches all the relevant issues
aXe
SiteImprove
Tenon
WAVE
Lighthouse
But if you want to test your site with other tools, here is a bigger list
Lighthouse Guides
Lighthouse: How To
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. Hack For LA recommends that you run the tests and evaluate what changes you might want to make on your website to improve performance and accessibility.
How To Use
Lighthouse is in the Audits panel of the Chrome DevTools. To run a report:
For more information go to :
https://developers.google.com/web/tools/lighthouse/
Tip
You will want to re-run lighthouse on any code changes before integrating them into your site. Sometimes the specific suggestions it makes, do not actually result in improved performance or can actually harm performance.
Lighthouse: Accessibility - Forms
In order for your sites form(s) to be usable by visitors using screen readers all the form elements need labels. There are specific details and exceptions, which can be found in the instructions below.
Action Items
If your site already has forms review the instructions and document the changes needed to bring your form(s) into WCAG compliance, by commenting on this issue.
If your site does not have forms review the instructions and design new forms using the WCAG standards.
Instructions
Deque University
https://dequeuniversity.com/rules/axe/3.2/label
Lighthouse: Accessibility - Links
The formatting of links can make them readable or unreadable by screen readers. Which includes creating programmatic events for links without making them device specific (e.g., onfocus() instead of onmouseover(), etc.), and other ways of making sure all links are visible by screen readers.
Action Items
If your site already has links review the instructions and document the changes needed to bring your link(s) into WCAG compliance, by commenting on this issue.
If your site does not have links yet review the instructions and design all new links using the WCAG standards.
Instructions
Deque University
https://dequeuniversity.com/rules/axe/3.2/link-name
Lighthouse: Image Optimization
When you run the lighthouse review it may suggest some specific image optimizations such as choosing another image format and making those changes may or may not improve your sites actual performance.
Action Items
Run lighthouse on a local version of the website and then apply suggested changes and retest locally before determining if you want to keep the changes.
Instructions/Resources
Google's Tools for Web Developers: Optimize Images
Read closed issue hackforla/UI-UX#111 from when HackforLA.org did our audit, to see why we decided not to do the image optimization
Lighthouse Issue: Cross-origin destinations are unsafe
Links to cross-origin destinations are unsafe both from a security and performance perspective.
Action Item
Run Lighthouse and then follow the instructions in [cross-origin destinations are unsafe]
(https://developers.google.com/web/tools/lighthouse/audits/noopener) .
Summary of instructions
When using target=_blank also adding rel="noopener" to the tag ensures that new page runs in a separate process.
Wave Guides
Wave Chrome Extension: Accessibility review
Action Items
abryant35 commentedon Jul 19, 2021
daniellex0 commentedon Jul 20, 2021
ExperimentsInHonesty commentedon Aug 30, 2021
salmonciara commentedon Aug 30, 2021
ExperimentsInHonesty commentedon Sep 1, 2021
salmonciara commentedon Sep 3, 2021
41 remaining items