Merken

An Intro to Web Accessibility in Django

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
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
Videospiel
Benutzerbeteiligung
Client
Systemverwaltung
Maschinelles Sehen
Computeranimation
Schnittstelle
Feuchteleitung
Fitnessfunktion
Resultante
Punkt
Schärfentiefe
Familie <Mathematik>
Versionsverwaltung
Element <Mathematik>
Computeranimation
Homepage
Spezialrechner
Metadaten
Kontrast <Statistik>
Feuchteleitung
Softwaretest
Schnelltaste
Abfrage
Profil <Aerodynamik>
Web Site
p-Block
Rechenschieber
Arithmetisches Mittel
Rhombus <Mathematik>
Texteditor
Rechter Winkel
Verschlingung
Garbentheorie
URL
Schlüsselverwaltung
Zeichenkette
Lesen <Datenverarbeitung>
Tabelle <Informatik>
Standardabweichung
Subtraktion
Gewicht <Mathematik>
Web-Seite
Benutzerbeteiligung
Bildschirmmaske
Vererbungshierarchie
Inhalt <Mathematik>
Optimierung
Bildgebendes Verfahren
Hilfesystem
Analysis
Touchscreen
Beobachtungsstudie
Schlussregel
Mailing-Liste
Elektronische Publikation
Binder <Informatik>
Kontrast <Statistik>
Flächeninhalt
Web Site
Freeware
Content <Internet>
NP-hartes Problem
Term
Computeranimation
Videokonferenz
Informationsmodellierung
Mustersprache
Visualisierung
Inhalt <Mathematik>
Optimierung
Maschinelles Sehen
Gerade
Filter <Stochastik>
Vervollständigung <Mathematik>
Element <Gruppentheorie>
Physikalisches System
Rechenschieber
Flächeninhalt
Rechter Winkel
Mereologie
Kantenfärbung
Standardabweichung
Lesen <Datenverarbeitung>
Subtraktion
Ortsoperator
Schaltnetz
Kartesische Koordinaten
Bridge <Kommunikationstechnik>
Element <Mathematik>
Computer
Computeranimation
Richtung
Eins
Multiplikation
Bildschirmmaske
Benutzerbeteiligung
Prozess <Informatik>
Fokalpunkt
Widget
Äußere Algebra eines Moduls
Inhalt <Mathematik>
Schreib-Lese-Kopf
Inklusion <Mathematik>
Lineares Funktional
Schnelltaste
Ontologie <Wissensverarbeitung>
Zwei
Cursor
Plot <Graphische Darstellung>
Quellcode
Physikalisches System
Fokalpunkt
Rechenschieber
Funktion <Mathematik>
Twitter <Softwareplattform>
Rechter Winkel
Hydrostatischer Antrieb
Konditionszahl
Mereologie
Gamecontroller
Garbentheorie
Modelltheorie
Web Site
Punkt
Benutzerführung
URL
Maßerweiterung
Computeranimation
Gruppenoperation
Fehlermeldung
Eins
Instantiierung
Schnittstelle
Tabelle <Informatik>
Abstimmung <Frequenz>
Formale Grammatik
Content <Internet>
Web Site
E-Mail
Computeranimation
Gruppenoperation
Kontrast <Statistik>
Homepage
Standardabweichung
Touchscreen
Authentifikation
Autorisierung
Kontrast <Statistik>
Standardabweichung
Tabelle <Informatik>
Wellenlehre
Schreib-Lese-Kopf
PASS <Programm>
Gradient
E-Mail
Computeranimation
Kontrast <Statistik>
Spezialrechner
Gruppentheorie
Kantenfärbung
Kontrast <Statistik>
Bitrate
Normalvektor
Quader
Wellenlehre
Parser
E-Mail
Raum-Zeit
Computeranimation
Mailing-Liste
Flächeninhalt
Menge
Verschlingung
Zeitrichtung
Kantenfärbung
E-Mail
Bildgebendes Verfahren
Benutzerführung
Touchscreen
Soundverarbeitung
Element <Mathematik>
Computeranimation
Kontrast <Statistik>
Informationsmodellierung
Mailing-Liste
Bildschirmmaske
Lesezeichen <Internet>
Menge
Touchscreen
Projektive Ebene
Kantenfärbung
Kontrast <Statistik>
Mailing-Liste
Flächeninhalt
Rechter Winkel
Element <Gruppentheorie>
Gruppenkeim
Attributierte Grammatik
Digitalfilter
Kontrast <Statistik>
Teilbarkeit
Computeranimation
Kontrast <Statistik>
Mailing-Liste
Bit
Rechter Winkel
Gruppenoperation
Element <Gruppentheorie>
Attributierte Grammatik
Digitalfilter
Computeranimation
Homepage
Mathematik
Ontologie <Wissensverarbeitung>
Ausnahmebehandlung
Element <Mathematik>
Nummerung
Dialekt
Computeranimation
Homepage
Eins
Homepage
Skalarprodukt
Projektive Ebene
Maschinelles Sehen
Simulation
Benutzerführung
Orakel <Informatik>
Punkt
Momentenproblem
Extrempunkt
Adressraum
Formale Sprache
Versionsverwaltung
t-Test
Kartesische Koordinaten
Computeranimation
Homepage
Client
Kontrast <Statistik>
Figurierte Zahl
Gerade
Softwaretest
Umwandlungsenthalpie
Güte der Anpassung
Quellcode
Wiki
Biprodukt
Konfiguration <Informatik>
Arithmetisches Mittel
Dienst <Informatik>
Menge
Twitter <Softwareplattform>
Rechter Winkel
Zeichenkette
Fehlermeldung
Lesen <Datenverarbeitung>
Instantiierung
Web Site
Subtraktion
Quader
Selbst organisierendes System
Gruppenoperation
Implementierung
Term
Framework <Informatik>
Reelle Zahl
Affiner Raum
Inhalt <Mathematik>
Optimierung
Maßerweiterung
Bildgebendes Verfahren
Analysis
Touchscreen
Soundverarbeitung
Videospiel
Digitales Zertifikat
Stochastische Abhängigkeit
Eindeutigkeit
Einfache Genauigkeit
Mailing-Liste
Paarvergleich
Binder <Informatik>
Quick-Sort
Chipkarte
Flächeninhalt
Pufferüberlauf
Last
Wort <Informatik>
Kantenfärbung
Normalvektor
COM
Computeranimation

Metadaten

Formale Metadaten

Titel An Intro to Web Accessibility in Django
Serientitel DjangoCon US 2016
Teil 01
Anzahl der Teile 52
Autor Horne, Annalee Flower
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/32730
Herausgeber DjangoCon US
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
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.

Ähnliche Filme

Loading...