An Intro to Web Accessibility in Django

Video in TIB AV-Portal: An Intro to Web Accessibility in Django

Formal Metadata

An Intro to Web Accessibility in Django
Title of Series
Part Number
Number of Parts
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.
Release Date

Content Metadata

Subject Area
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.
World Wide Web Consortium Vapor barrier Computer animation Multiplication sign Interface (computing) System administrator Fitness function Video game Client (computing) Machine vision
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) Mathematical analysis Electronic mailing list Depth of field Arithmetic mean Uniform resource locator Computer animation Query language Right angle Text editor Table (information) Family Reading (process) Resultant
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
Slide rule Functional (mathematics) Game controller Multiplication sign Direction (geometry) Source code Combinational logic Sheaf (mathematics) 1 (number) Disk read-and-write head Mereology 2 (number) Twitter Element (mathematics) 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 Process (computing) Exterior algebra Computer animation Hydraulic motor Right angle
Point (geometry) Graphical user interface Uniform resource locator Computer animation Interface (computing) 1 (number) Website Instance (computer science) Extension (kinesiology) Error message
Standard deviation Voting Computer animation Multiplication sign Formal grammar Contrast (vision)
Computer animation Personal digital assistant Contrast (vision) Graph coloring
Area Medical imaging Email Touchscreen Computer animation Cuboid Set (mathematics) Arrow of time Graph coloring Spacetime
Computer animation Projective plane Set (mathematics) Sound effect Endliche Modelltheorie Contrast (vision) Graph coloring Bookmark (World Wide Web)
Area Group action Computer animation Divisor Right angle Contrast (vision)
Group action Computer animation Bit Right angle
Web page Dialect Mathematics Dot product Computer animation Ontology Projective plane 1 (number) Exception handling Oracle Element (mathematics)
Group action Multiplication sign Source code Set (mathematics) Client (computing) Public key certificate Computer programming Formal language Wiki Medical imaging Web service Computer configuration Different (Kate Ryan album) 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) Arithmetic mean Message passing Website Self-organization Normal (geometry) Right angle Quicksort Figurate number Reading (process) Web page Point (geometry) Implementation Link (knot theory) Real number Student's t-test Graph coloring Twitter Product (business) 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 Plastikkarte Independence (probability theory) Line (geometry) Cartesian coordinate system Affine space Word Computer animation Video game Buffer overflow
many of it and if you do it will be a good fit to the EU and the 1
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
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
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
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
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
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
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
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
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
and guess the secondary faster wanted using consistently
time we do not compress the time that little on the formalize the assumed to light the vote on accessibility
guidelines that 1 of the 4 . 5 to 1 contrast using additional 871 contrast raising the standards drilling on fortunately the the the wait
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
international writers and now you can
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
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
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
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
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
who in the light blue and red and blue on a darker and darker group but once you you know
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
those the updates the right so that status the talk advance the so this is
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
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
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
and so
if he even knew