TerribleDev/blog.terrible.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y done

Browse Source
This commit is contained in:
Tommy Parnell
2020-08-08 22:18:35 -04:00
parent a245a21e02
commit 0e36180218
2 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/TerribleDev.Blog.Web/Posts/Accessibility-Driven-Development.md
View File

@@ -13,7 +13,7 @@ Knowledge gaps aside CarGurus has a multitude of technologies UI are build with.
> Our first approach was to teach accessibility. At the same time we worked with our brand marketing team to ensure our color pallet would be accessible from the start.
After identifying advocates on every team we set out to streamline identifying accessibility issues. One approach I decided to take was to show borders around failing elements during development. I first heard of this idea years ago when GitHub released something it called [accessibilityjs](https://github.com/github/accessibilityjs). This script Github included in its pages and put a giant ugly red border around failing elements.
After identifying advocates on every team we set out to streamline identifying accessibility issues. One approach I decided to take was to show borders around failing elements during development. I first heard of this idea years ago when GitHub released something it called [accessibilityjs](https://github.com/github/accessibilityjs). This script Github included in its pages and put a giant ugly red border around failing elements. I thought this was a really slick idea to point out issues during development.
> I was going to use accessibility JS until I found axe-core
@@ -100,4 +100,4 @@ So the result of all this is a function that listens to changes in the HTML docu
We log the Deque error object to the console which includes links to the failing elements. The result is whenever anyone develops new UI at CarGurus a giant ugly red border surrounds elements they don't write as accessible. This provides **immediate** feedback during the development process and prevents huge categories of accessibility issues from reaching production.
![An example of a failing element](1.jpg)
![An example of a failing element](1.jpg)

3
src/TerribleDev.Blog.Web/Views/Tags/AllTags.cshtml
View File

@@ -1,5 +1,4 @@
@using System.Collections.Immutable;
@model IDictionary<string, ImmutableList<IPost>>
@model IDictionary<string, IList<IPost>>
@{
ViewData["Title"] = "all-tags";
}