An Intro to Web Accessibility in Django
Formal Metadata
Title |
An Intro to Web Accessibility in Django
|
Title of Series | |
Part Number |
1
|
Number of Parts |
52
|
Author |
|
License |
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license. |
Identifiers |
|
Publisher |
|
Release Date |
2016
|
Language |
English
|
Content Metadata
Subject Area | |
Abstract |
Like most developers, I've always known that building accessible web apps is the right thing to do, but I wasn't sure how to do it. I tried my best to add image descriptions and audio transcripts and figured that was good enough. Then I started work on a Django 1.8 project for an agency that has a low-vision website administrator. When we sat her down in front of the app's admin interface for the first time, she had a lot of trouble using it. The contrast was way too low, and control features like sort by column weren't properly labeled. After watching her navigate the admin interface and learning more about how disabled users navigate the web, I customized our app's admin interface to improve accessibility. I've since gotten training in web accessibility, and want to share some of what I've learned so we can all build more accessible apps.
|

00:00
World Wide Web Consortium
Vapor barrier
Computer animation
Multiplication sign
Interface (computing)
System administrator
Fitness function
Video game
Client (computing)
Machine vision
00:49
Web page
Point (geometry)
Slide rule
Vapor barrier
Computer file
Link (knot theory)
Observational study
Multiplication sign
Sheaf (mathematics)
Online help
Rule of inference
Computer programming
Metadata
Element (mathematics)
Revision control
Medical imaging
Different (Kate Ryan album)
Profil (magazine)
String (computer science)
Software testing
Contrast (vision)
Rhombus
Area
World Wide Web Consortium
Standard deviation
Touchscreen
Inheritance (object-oriented programming)
Key (cryptography)
Block (periodic table)
Weight
Keyboard shortcut
Content (media)
Electronic mailing list
Mathematical analysis
Depth of field
Uniform resource locator
Arithmetic mean
Computer animation
Query language
Right angle
Text editor
Table (information)
Family
Reading (process)
Resultant
05:19
Filter <Stochastik>
Area
Slide rule
Standard deviation
Content (media)
Line (geometry)
Mereology
Complete metric space
Graph coloring
Machine vision
Computer programming
Computer animation
Visualization (computer graphics)
Term (mathematics)
Videoconferencing
Website
Right angle
Pattern language
Endliche Modelltheorie
Freeware
Reading (process)
Physical system
07:02
Slide rule
Game controller
Functional (mathematics)
Multiplication sign
Direction (geometry)
Source code
Combinational logic
1 (number)
Sheaf (mathematics)
Disk read-and-write head
Mereology
2 (number)
Element (mathematics)
Twitter
Neuroinformatik
Bridging (networking)
Different (Kate Ryan album)
Ontology
Position operator
Condition number
Physical system
World Wide Web Consortium
Multiplication
Focus (optics)
Keyboard shortcut
Content (media)
Cartesian coordinate system
Exterior algebra
Process (computing)
Computer animation
Hydraulic motor
Right angle
09:50
Point (geometry)
Graphical user interface
Uniform resource locator
Computer animation
Interface (computing)
1 (number)
Website
Instance (computer science)
Extension (kinesiology)
Error message
10:43
Standard deviation
Voting
Computer animation
Multiplication sign
Formal grammar
Contrast (vision)
11:10
Computer animation
Personal digital assistant
Contrast (vision)
Graph coloring
11:37
Area
Medical imaging
Email
Touchscreen
Computer animation
Cuboid
Set (mathematics)
Arrow of time
Graph coloring
Spacetime
12:11
Computer animation
Projective plane
Set (mathematics)
Sound effect
Endliche Modelltheorie
Contrast (vision)
Graph coloring
Bookmark (World Wide Web)
12:43
Area
Group action
Computer animation
Divisor
Right angle
Contrast (vision)
13:06
Group action
Computer animation
Bit
Right angle
13:34
Web page
Dot product
Mathematics
Dialect
Computer animation
Ontology
Projective plane
1 (number)
Exception handling
Oracle
Element (mathematics)
15:10
Group action
Multiplication sign
Source code
Set (mathematics)
Client (computing)
Public key certificate
Computer programming
Formal language
Wiki
Medical imaging
Web service
Different (Kate Ryan album)
Computer configuration
Single-precision floating-point format
Cuboid
Software framework
Extension (kinesiology)
Error message
Area
Touchscreen
Structural load
Moment (mathematics)
Electronic mailing list
Sound effect
Maxima and minima
Instance (computer science)
Message passing
Arithmetic mean
Normal (geometry)
Website
Self-organization
Right angle
Figurate number
Quicksort
Reading (process)
Web page
Point (geometry)
Implementation
Link (knot theory)
Real number
Student's t-test
Graph coloring
Product (business)
Twitter
Revision control
Latent heat
Goodness of fit
Term (mathematics)
String (computer science)
Software testing
Contrast (vision)
Address space
Pairwise comparison
Uniqueness quantification
Content (media)
Mathematical analysis
Independence (probability theory)
Plastikkarte
Line (geometry)
Cartesian coordinate system
Affine space
Word
Computer animation
Video game
Buffer overflow
00:00
many of it and if you do it will be a good fit to the EU and the 1
00:15
I had dyslexia an 8 on so accessibility is something that I had in mind basically my entire life and a few a couple years ago I was working on a a general at the client to the web administrator is has low vision Jesus Freeman fire the 1st time I suddenly genuine interface she couldn't see anything because the light blue on white was this is you know when it was not working for her so I had to learn a lot about how to break down barriers to accessibility and build more accessible he just want to share some of some of how we do it and what i'm accessibility
00:51
I really like this that and accessibility is possible moving barriers as it makes about barriers and that's about a person right we can say my disability makes it difficult to navigate the Web actually areas accessibility difficult from the Web eliminate those that minimum that's what it's great so the about some of the different disability people have that implies that they can have an heating up against various trying get trapped in an online version is blind low-vision
01:21
users this is the 1 of the things that think of you know you have to 116 different and each of aligned with the users is actually a lot more to it the stimulus and all these things from really helps a lot for the team elderly helps on 1 year if you're using you know how each 1 of the key issues so yeah will actually pass 1st created table contents to the user so that they can get down to the section of the present so having as formatted correctly having them using the consistent location that you don't have different age what all over the place so that discrimination is a big help for that high contrast is another thing a lot of time on this user don't use fingers these magnification random the text and having high contrast and much easier to see if they don't have to zoom so far as unrestricted text is another big 1 here and if you're using a screen reader 1 of things that does that pulls eliminates the teacher and shows them in a list of users and users looking for more resources than just having a list of links but here listed here most of my look like Click here Click here quick here here personal non-genetic Fabricio it's also really bad for years so you wanna say you know you have only 2 to edit your profile want say editor program here holding dealing instead of just editable file here having actually so that a blind user queries and see if I wanna point out that was my thinking is animosity between relevant image captions and this 1 is e to the 1 is people not including the fact that all the honest people captioning is waiting much the weighting all text and so this slide that picture spectacles on a keyboard if I was kind a study of text of a page that's all I would say you don't even entry parents stunning everything about this image and is also a need to discriminate in now is what that is relevant to the topic you that the same image to illustrate an article on photography I might instead say an example medium depth of field or something that's relevant to that you don't have to describe the whole image was a constant but there's also things like bullet means where the walls don't have Texas a screen reader users are going to know that the reading unordered list is a string literal person you know until they don't know the book when looks like the veteran diamonds is a little rule cross-diffusion you put in all tax on all ages and stages that there was a diamond diamond diamond diamond and so this to the end of the gas that's that's that's that's 1 once you have the navigational that repeated in and on the Spartans in families if you're doing a couple of closing your CSS and peoples in the text of the the do it and suddenly there's a lot of others in your content that they can see the show that your B so the was on accessibility guidelines to identify 3 so the gold standard for having accessible webpages and SNR is it actually is enabled to 200 % without losing content and talk a lot more about later but it is 1 point out here I'm actually have harvesting all you can have turned on the command typed do their analysis on the on the result of reasoners you can download the civilian for testing but you can here just even when is a highly customizable programs that people that a lot of practice using the sometimes people will tell you only she is from Asturias see how blind people navigate the aware of similar telling people it's just going for the help like block of metadata real-world great there people have practice they have trained how these things just because it's hard to turn it on you don't get discouraged because that doesn't mean that you want this awful for everything in the United States area to really testing individuals so it's a good thing to have 1 solves the and the europeans 1st specific thing we you know know how I have this in your hand if this particular form element captured correctly all text this that column
05:21
on and the 1 basically the standard here is done for the emotions that you don't wanna inputting red texts indicate whether the part of the old West starts to seems people at the right is right so no those models are basically that's that's 1 should and there's free online tools about 1 in the top of my slides the world that what you have put your website through basically filters will show you what it looks like the various colors 1 of the real line and so here are not usually over on the left 1 which is complete lack of color vision of can see some color I will not watch out you're not using colors that are just going to read the same to that will lead the that definitely systems for a straightforward
06:10
pattern content and if you can't accompanied with the transcript as well and the reason I say this and if you're trying to get specific information on top and most people read faster than I talk on so if you're if you're trying to watch this video later in this specific information out of here you may just want to transfer the usual at particular thing you want and then having to watch the whole video just captions I'm non-verbal sounds with visual cues elites had experience with attracted about and they that don't sound which tells about applicable if you are in the area and act on the on the evidence that they not you wants you might sit there just keep that in mind wandering might slow rights program is you don't realize I forgot check about the rights of the terms so you know how something you will read texts as needed substantive read continue don't you know notice is
07:04
the following is that people with various neurological issues fact motors is not in your ontology obviously that's on the left is in the same combination on the standard lead the Web Content Accessibility allies for epilepsy they ask people to make sure that the weather that their elements and blinking no more than 3 times a 2nd is blindingly fast genera seizure which is obviously that means there's under executive function the sources um summary of dyslexia to real to me there's a lot of ah headings and subheadings breaking up content control of my best friend I oftentimes scanning content and bridges some work that way so I need to find something that I'm looking for content that way also helps people each user with a will find a place in the past Ulises's positive stop anything that's in the linking carousels if you've got slide shows it is you want to read those things and the idea behind multiple situations where something on a slight elements to the next slide and I have no way to stop it's the witness what comes around a steeper annoying so let people passing but people hide things and my favorite thing is when I'm on this slide I want to read something and there's a flashing here were at school tweets over here I get distracted every 5 seconds and I have to find a place again taking forever in heaven my and what remains something things on the have and then the rest of us he would take a longer time from now forms we get a lot of a lot of times now say more time but they're still feel that it is likely that the definition a single arrest only long-legged don't read it all over again and raise the plot and so this so the different kinds of various people can experience in accessing was not about but at the time
08:55
I alternative jobs and people that have access to web without using either the keyboard and mouse sometimes if you would only need on people arthritis and people with certain of conditions that no terrorist can still have or will have limited movement of fingers they might have a switch system that flows into the computer and you is a keyboard the only show the applications are accessible to people there is an acute were only being here is just what you 1st focus make sure you're not tracking focus of something pops up animal then they should use it to close at all and when they do which is to focused whatever they were long before the part that's the direction that the topic AD and toolsets and things that were simply where you have have a actually 1 issue that also non-vocal sections of something is the more focus on right and will see the told so those are the ones and talk
09:51
about the interface my lectures accessibility I need the interface is actually 1 point 9 and this is a lot easier to make accessible someone was confident about you can see in the very recording there yet recorded from your site that w that is the way that within that were chrome on extension and what that does is stylistic from extension you can also go to the website itself and plug in your URL but economics and you can use it on wall instances in and you know on there and what it does is it helps with accessibility of the 1st
10:24
thing is just the the standard pulls out an agenda for this is the origin of life and tells you to the ones on the stage does not ideal 1 using these consistently occasionally 1 each 1 should get out man but other than that actually doing pretty and it's no big red errors facts
10:44
and guess the secondary faster wanted using consistently
10:50
time we do not compress the time that little on the formalize the assumed to light the vote on accessibility
11:00
guidelines that 1 of the 4 . 5 to 1 contrast using additional 871 contrast raising the standards drilling on fortunately the the the wait
11:15
to here actually gives you call it allows you to play around lighten darken colors get something that's close to your existing color but is actually has been contest so in this case the best 1 for 1 contrast with another to fight for 1 medical alert
11:34
international writers and now you can
11:38
see this is what the darker colors are done with that and so this is the page and you're getting actually additional areas we don't have the header on the column has to check boxes and check boxes themselves and we will so on when a screen readers and all of
11:54
these it's also kind of an entity later on we sort right column and because that that image actually is a space and of set of CSS is something that is using a screen reader can see those little arrows on doesn't know what that what that does I'm a
12:13
mystery of each of us is that of the and check checkbox how much she's of sets and gesture project to use your favourite captain model whose effectiveness model so that they have when accessing the checkbox itself is to move from that to figure out what is that the
12:30
but we also that in contrast however the the so these are actually easy effects because the and this means that many colors the environment with fast however and with
12:44
some issues here when we make a great from later the contrast there anymore and suddenly it looks exactly like the rest of right and so they did is they had an underline and you can tell the questions now and then also the factors down in those areas
13:00
who in the light blue and red and blue on a darker and darker group but once you you know
13:08
and the saturated something that's colorblind may not be enough to see that the lives of my just like brain brain and tell which can be overcome which item that this action on this is also an indictable yeah you're making a little bit more about it and that's what this looks like all
13:26
those the updates the right so that status the talk advance the so this is
13:37
just a detail page again it's out formants what text but that doesn't look very pretty wife except for the methods so here's some
13:46
accessibility resources mathematics and what you here and that's it the over the Leslie genuine violates and you have positively mention just as solid as an active as at your project and will overwrite I'm and sales for you to give the darker regions of the found in innocent learning the who from London ontologies and Alison as 1 of the ones we can filter your page to see what it looks like a people the kind of oneness regard has always accessibility guidelines of and actually pretty easy to find and search through so that's something we don't look at those and you know reading a bunch of dots isn't terrified disaster are pretty thorough and a fairly good suggestions so you can check for those who did that question about again this element is a problem and fix it they will have say that the of currently have so that it doesn't questions well you could and who you have in the question the you had an oracle and there's this means that even you my in rather than the 1 that it the text that of the edge
15:13
anywhere don't you go there as so that it can only help you there's about upstream to be but the eye hand and still working on an analysis and all the CSS that I think that the creation of new smart because this is a wiki burden you would would say I can get this the so so there's a lot of this work is pretty much based you know word but do you see assessed an affirmative effect on it so however the CSS frameworks and stuff like that way and it they make the situation better or worse so when you're looking at the accessibility at color contrast is most what hit on sometimes if you got the overflow cut off on that happens in CSS along with that of our is make it so the your Texans amount to assume that without triggering I but mostly it's just a colors have high enough contrast we do that in image and of framework and I think you do do what I do the end and I was curious if you are a if you'd need many non-profits feeling have especially good websites in terms of you know the full right to the public the able to access them on the National Federation of the Blind actually obviously didn't have a good time there are other sources to enable a lot of a lot have of the version of the pages that is meant for people to look and then they have relocated is meant to be read I which just starts out all of the RCS CSS in it but it's not just like occasion CSS is formatted differently so the string there and read it and everything you usually don't have to go that far and usually if you're using the original properly then you can have the same age accessible and also human readable of 1 thing didn't hear you called Cecilia topic imaging you have some experience with those already of modelling sort of what your expenses than with that in any difficulties removed from cross-scale will work so a is figure program and I actually is along comes those phenomena and so I have been using area at all recently un the by sort of the the most common thing you program in it it has some of us really the specific HTML tags that supports I'm for instance alternatively text is right now at this something a lot of people want all text the links because they want to use link comparison also the several text will tell people what it actually went to write on Austria's try to mimic what page actually looks like so they don't take out all text on links and pick up the actual taxable income and that's in 1 hour has an option where you can actually and attacked that will read something different danger there is that those are universally supported tax you can stay in our intense for artery but somebody is on matters using a different screen reader this figure may not be for instance the maximum 1 doesn't pick up by text so my question is given the kind of list you have a lot of accessibility issues that were preferred away and especially for her own pages or a applications that had addresses ever what would be you know the best bang for your buck of in terms of looking for a unloading fruit clean reaching now and make sure that you're using well formatted HTML that spammers can have an easy time passing and I think color contrast is line through the that's independent of your design and lot of the other thing through is getting captions on your images on just the images that have specific content and basically it has Texan you want action if it has a meaningful content want that something that's illustrating something but doesn't have a lot of meaningful content using need like a sentence that says what is so that people can tell that doesn't mean we can't do and other things that are just there visually and certification visually organize page for sighted users unique caption in a way that you find questions Q that we could take a better knowledge so fast and will give the student and you take 1 more until afterwards so you mentioned that on it's it's good the tester paid for the screen reader and you also mention that it's in the people who use those things regularly are going to be much more also went with them so they do you know of any organizations where you work with anyone on they that uses a screen reader regularly or uses these assisted technologies regularly to actually test your pages sort of before you would go to production I don't know anybody who offers that as a service no individual friends that I can ask and that's the question I will I will find this in and around the GenGO on Twitter and find the the a lot of languages do when they're using Springer is just the way up on because we really most of us now me that most people really fast and the top and and so they're all just they get used to hearing it the speed up 10 so if you need to you just turn your Primera normals he was people who use these other products get get the center the determines almost the affinity for a reason the are not only around you talk about just a single page applications how obsessively changes in on such a such as by but so my experience with the data from a projective the just a friends like that is the accessibility meant and they're not always accessible and that's 1 of the ways of do the that for that word for each know the test page African writers words you plug it into a chapter that doesn't just the 1st for a lot of errors that can exist which is not new money on so you the I'm from extension because of our city of really for that because it'll actually look the page load before it starts leading mostly leaders were smart enough now of the the final question and so my question is just from implementation standpoint you have a clients or colleagues that at design agent looks very good but what actually start moving toward accessibility is there likability describe a few moments ago what they high motor accessibility notice that a standard that's laid out a set of entities to use that's something that some people do is they will offer liar contrast moderate larger text it tends to be better to just make your page accessible as box and but if you have really really person specifically designed you end that sometimes with that compromise that means operated pretty have different versions of the society easy start that yeah the I love designers are not science sometimes the knowledge of a nonlinear and answer questions and real life and will you will seek to chat also it's friend I will expressed and here and so there is a point absolutely stunning all and that with me a lunch all but aluminum engage we will aid but they've only at ch thank
22:56
and so
22:57
if he even knew
