Hi I’m Rachel and I am a software engineer
on the Google Accessibility Engineering team. In this video I want to talk to you about
how you can develop extensions for Chrome that can be useful for users with disabilities. For users with disabilities such as blindness,
low vision, deafness, or limited dexterity, the web can be difficult or even impossible
to navigate. From interfaces that don’t allow keyboard navigation to text that is
too small to read, users with special needs can find a lot of obstacles in front of them
and their favorite content. Chrome browser extensions can help by enabling users to customize
many aspects of the browser and the web. One extension that I’ve been working on
for a while is called ChromeVis. It’s an extension that gives you the ability to
magnify any selected text on a webpage. ChromeVis displays the magnified text inside
of a floating lens, so the original page layout is preserved. This extension is intended for users with
low vision, and I have included some key features that are important to this user group. First, the extension is completely keyboard
navigable. You can move the selection around the page
without ever touching the mouse. You can use keyboard shortcuts to specify whether you
want to move the selection by paragraph, sentence, word, or even character. Second, both the lens text color and the lens
background color can be changed. This is also done through keyboard shortcuts.
This way, you can adjust the lens to achieve your desired contrast between foreground and
background. And you can save several different combinations of foreground and background
color. Finally, we included two layout options for
the lens display. You can keep the lens anchored at the top
of the window while scrolling the page underneath it. Or, you can make the lens appear directly
above the selected text, enabling you to see the magnified text in its original context. The ChromeVis options page is an important
part of the extension. Here, you can change the lens colors as well as specify your own
keyboard shortcuts. This is especially important for users who
might be using screen reading software that reserves its own keyboard shortcuts, or when
a user is using a web application like GMail that reserves additional shortcuts. Any developer can integrate features like
those found in ChromeVis into their extension because we’re releasing the code as open
source. There are a few features that I think could be particularly interesting: To move a selection around a web page automatically,
I relied upon the WebKit selection API. I call selection.modify whenever I want to move
a selection forward or backward in the page, and wrapped this call into the functions nextElement
and prevElement. I also did some additional work to clean up
the selections that selection.modify produces to ensure logical movement between
and so that blank text nodes or spacer nodes are not included in a selection. It was actually a non-trivial problem to determine
the position of selected text, because text nodes do not have position attributes. I ended
up calculating the position by inserting a span at the beginning of the selection range,
determining the position of that span, and then deleting the span. If you think these functions would be useful,
and color options are some simple ways to make your extensions more accessible to users
and give the browser more flexibility in how content is displayed. If you want more specific
information on writing accessible extensions, please see the new Accessibility implementation
guide in the Chrome Extensions Developer’s Guide at code.google.com/chrome/extensions
Add your name, last name, and your email. Click on “Next.” To step number three. Here you can choose the type of icon that you want to display. You can choose among these four. Let’s click on “Next” to step number four where you will select the size. No matter which size you choose, mobile devices will always display this smaller size. Let’s click on “Next” to step number five. Here with this color picker, you can choose the color of your button so it matches the design of your site. Let’s click on “Next” to step number six, where you can select the position
of the button on your site. Select your preferred one and continue
to step number seven. Here you can choose the widget’s language. You can let the widget to automatically
detect the language of your visitor. Or if you want to force the widget to display in a specific language, then open this list and select yours. Let’s continue to step number eight. It’s very important to make
your site accessible, but it’s also very important to have an accessibility statement. If you don’t have one, don’t worry because we can help you with that. Just click on “No/I don’t know,”
and we will help you with that later. Let’s continue to step number nine. If you’re interested in advanced custom options for this widget, then I strongly recommend you to click on “I’d like to learn more” for more information. And last, scroll down to the last step where we’ll get our code. Click on “Copy,” and let’s go to Joomla. I’m in Joomla control panel.
The code is copied to my clipboard, so now follow me to paste this code before a body closing tag. Here in this upper menu, click on “Extensions,” “Templates,” and again “Templates.” Here you have to select the template that you’re working on. I’m going to select mine, which is this one over here. Now, I’m inside the template and now you should find the index.php file. So here on the left. Here it is. Click on it. And now let’s search for the body closing tag. So I’m gonna scroll all the way down. Here it is. This is the body closing tag. So
I’m gonna paste the code right above it. Okay? Just gonna get some space so I can paste the code. Here it is. Click on “Save.” And you’re done. Now let’s preview the site. And here’s our widget. If you see the widget, that means that you have installed everything correctly. But there’s another way to verify the
installation. Let’s go back to userway.org, and I’ll show you how to do it. You can also click on the “Let’s Verify” button to make sure that you’ve done everything correctly. But again, if you already see the widget on your site that means that everything’s okay. So what you can do is click on “Skip.” And you get your accessibility statement. This is a template that you can copy, you can edit, add your own details and bring it to your site. If you want to learn how to install UserWay widget in other platforms like Squarespace, Webflow,
WordPress, and many more, you can follow the video that you can see on your screen right now. Visit UserWay YouTube channel, and in
the description below this video you’ll find a list of all the installation
guides for other platforms. Don’t forget to subscribe!
This video explains how to configure
and install the captions plugin. The captions plugin displays closed captions and
multilingual subtitles for the most popular video players. It also makes your video searchable
and SEO friendly. The easiest way to install the captions plugin
is to insert the embed code from your 3Play Media account into the HTML of your web page. The captions files and search will
be hosted by 3Play Media. To begin, go to My Files and
select the Publish tab. Then click the Video Plugins link beside
the file that you want to publish. Then select the Captions Plugin tab. This opens an interface where you can set
up and preview the captions plugin. Click the checkbox to enable the plugin. Then choose the type of video player
you are using and the settings. For example, you can change the
skin to be light or dark. Or if you select overlay mode, the text will
be displayed on top of the video instead of underneath. You can try out different settings using the
preview window on the left side of the screen. To add the SEO component, select the SEO
Transcript tab and check the box to enable it. This allows search engines to index
the spoken content in your video. The embed code in the bottom right corner
automatically updates when you make changes to the settings. Once you’ve decided on the settings, click
the embed code to select it, and copy it to your clipboard. Then paste it in your web page, right
after the code for the video player. The captions plugin should now
appear on your web page. You can further customize the plugin
by tweaking the embed code. For example, you can control the width and
position, add multiple subtitle language tracks, or disable certain features. For complete details, refer
to support documentation. Although not covered in this video, it’s also
possible to do a self hosted installation, so that the plugin and captions files are
stored internally on your server. Also, note that the captions plugin can be used
in combination with other video plugins, like the interactive transcript. Thank you for watching this video
on using the captions plugin. Please feel free to contact us if you have
any questions or need additional support.
Hi, hi, it’s Bruce Lawson here. I’m here doing
a “Vlog” for 2 reasons. The first is that I think we need to establish what the word
HTML5 means and the second is that I want to try out, in advance of a presentation I’m
giving tonight, my new ranting head gear. This was brought to me from Tokyo by my friend
Nedjma. Thanks, Nedjma! And I believe it says “Mighty Wind”, although it might say
something else, my Japanese is very limited, so I’ll be trying this out to see how well
it works. Anyway, as you know, Remy Sharp and I have written a marvelous book – “Ding!”
[showing book] – all about HTML5 and we bung in some stuff that isn’t HTML5, things like
web workers which were never part of the spec but were from the same working group and things
like we used geo-location, which is nothing to do with the people who wrote HTML5 – It’s
allows you to do cool things for web applications. [Puts on ranting head gear.] But what really,
really gets on my moobs is people who confuse CSS3 or CSS anything and HTML5. Look, HTML
is markup. CSS is [theatrically] gorgeous lovely typography and style and things that
the actual way your application works. These are 3 different things they do, 3 different
things, that’s why they are 3 different technologies, that’s why they got 3 different bloody names.
They are not the same thing. I don’t care if some marketing department or some sexy
company that makes sexy, sexy gorgeous hardware that makes people with otherwise independent
brains go all bloody newspeak and duck think and ooooo woooo – whatever they say about
these new shiny i-things. I don’t care what that company’s marketing
departments say; HTML and CSS are different things and another thing – if _IF_ in your
markup you’ve got maybe a list and that list contains anchors and those anchors go to nowhere
just a hashtag and the only reason for it being there is so you can hang loads of CSS
transforms and transitions and go eeee and weeee and wooooo, then you’re doing it wrong.
Wrong. W.R.O.N.G. Incorrect, you made a mistake. This stuff is not markup. Markup is meaning
and this stuff means nothing, nada, f*ck all. This stuff you do when you mouse over and
you go weee woooo? Lovely, I love it, it’s gorgeous, I want to have your babies, but
do it with canvas, do it with SVG. For God’s sake even do it with Flash, You’re not doing markup – nothing to do with
markup. It’s just wankery. Don’t make a mistake. Look. The Web Standards Project, the WaSP,
Jeffrey Zeldman, Eric Meyer, these are good decent people. They have worked tirelessly
for you, for the web, they have had enough trouble, these men are the only 2 social liberals
in the whole of the United bloody States these men have had enough to deal with all their
lives and what are you doing? You’re weeing, no, worse! You’re doing number 2, a number
2 on the legacy of messrs Zeldman and Meyer! Every time you confuse HTML5 and CSS, they’re
not the same thing, they’re different and if you confuse them, there’s only one thing
that most mature and sensible adults will say and that’s your mom works for McDonald’s
for minimum wage. [Angry grunt sound.] [Removes ranting hat] So I think we’ve satisfactorily established
the fact that we need to keep our nomenclature straight. Thanks very much for listening.
My name is Leona Zumbo and I’m a Digital Accessibility Consultant
for Vision Australia. The Document Accessibility
Toolbar came about because we were running many Word and
PDF courses and the attendees were absolutely
overwhelmed with the amount of work they have to do to create
accessible Word documents. So we came up with this concept
where we decided we would take the
default functionality within Microsoft Word and create some of our own tools and macros to speed up the process of
creating those accessible documents. I’m Neil King, National Manager of Digital Access at Vision
Australia. The assumption is that Word is
an accessible format. But like all formats, it’s only
accessible if we make it accessible. I’m David Masters, Corporate
Affairs Manager for Microsoft Australia. We have a lot of accessibility
features in Word and in Microsoft Office and I think a lot of people just
aren’t aware of them, and so for an organisation to
make those easily discoverable and easy to
find and to provide a process in the
system that helps employees in that organisation
to create accessible documents, it’s a
great step. At a high level some of the
features within the tool are the colour contrast
analyser, a screen reader, a Word to HTML
converter. There’s also some basic
techniques that someone might want to consider when
creating a Word document, such as creating structure,
accessible navigation, tables that are optimised for
accessibility, and the great thing about this
tool is that it allows you to quickly
implement those techniques. The tool will be free to
download and works on Microsoft Word versions 2010
up to 2016. I think the DAT will really help
organisations to introduce accessibility in to
their day-to-day work by raising the awareness of
accessibility and as they’re working through
documents show them what accessibility features
and functions there are available to them to
make those documents more accessible. That’s where the DAT really
comes into play. The Document Accessibility
Toolbar enables you to not only create and
validate accessibility but also lets you as well
convert that to another accessible format, such as HTML. My name’s Wayne Hawkins. I’m Disability Policy Advisor
with ACCAN. ACCAN saw the inclusion of the
DAT as one of our grants projects as a really beneficial for
consumers with disability. It’s an almost fool-proof way of creating accessible
documentation. The absolute key benefit is the
assurance of knowing that you’re creating an accessible Word document, which
provides equal access to information for
everyone. And I think that’s one of the great benefits of this tool, is that people are being guided when they’re using the DAT in
making accessible documentation rather
than having to work it out themselves. It doesn’t matter what type of
document you’re creating. This one ribbon
will allow you to create an accessible output. It basically becomes business as
usual without adding any extra
complexities. So download it today, share it and be part of positive change
>>OKAY, SO THAT WAS A REALLY FINE WAY TO
START OFF. I’D LIKE NOW TO FIST SHIFT GEARS A LITTLE
BIT AND INTRODUCE OUR KEYNOTE SPEAKER. JUDE YU BREWER IS DIRECTOR OF THE WEB ACCESSIBILITY
INITIATIVE OF THE WORLDWIDE WEB CONSORTIUM. FOR THOSE OF YOU WHO ARE STEEPED IN THIS STUFF,
JUDY PROBABLY NEEDS NO INTRODUCTION. FOR THOSE OF YOU WHO HAVE BEEN SORT OF SCRATCHING
YOUR HEADS AND GOING,” WHAT IS THIS 2.0?” WELL, JUDY IS THE PERSON WHO LEADS THE EFFORT
TO DEVELOP THE STANDARDS THAT ARE GLOBAL STANDARDS DEVELOPED THROUGH A CONSENSUS PROCESS WITH
INDUSTRY, OTHER STAKEHOLDERS, ADVOCATES, ACADEMIC EXPERTS, THAT SET THE STANDARD, DEFINING ACCESSIBILITY
EVERYWHERE. AND THE MOVE IN THE UNITED STATES IS TOWARDS
HARMONIZING THE 2.0 STANDARDS, WHICH ARE ONE PART OF THE STANDARDS THAT HAVE BEEN OR GUIDELINES,
JUDY CORRECTS ME THAT HAVE BEEN DEVELOPED BY THE WORLDWIDE WEB CONSORTIUM ON ACCESSIBILITY.
JUDY LITERALLY TRAVELS AROUND THE GLOBE ATTENDING MEETINGS AND CONFERENCES PROMOTING HARMONIZATION
OF ACCESSIBILITY GUIDELINES, ADOPTION OF THOSE GUIDELINES AS STANDARDS BY COUNTRIES AND COMPANIES
AND GOVERNMENTS. AND WORK TO DEVELOP TOOLS AND RESOURCES AND
INFORMATION TO GUIDE PEOPLE IN HOW TO INTERPRET THOSE AND HOW TO IMPLEMENT THEM.
THIS IS A LOT OF WORK. IT’S DONE BY NOT A HUGE NUMBER OF PEOPLE,
BUT THEY’RE ALL VERY GOOD AT WHAT THEY DO AND JUDY HAS LED THE EFFORT FOR MANY YEARS.
SO LET ME INTRODUCE JUDY BREWER. [APPLAUSE]>>THANK YOU, DEBBIE, FOR THAT VERY KIND INTRODUCTION.
THIS IS THE PERSON WHO GOT ME INTO THE FIELD. “HEY, THERE IS THIS ACCESSIBLE TECHNOLOGY
STUFF YOU NEED TO CHECK OUT.” THAT WAS MANY YEARS AGO AND A LOT HAS HAPPENED
SINCE THEN. SO IT’S A GREAT PLEASURE TO BE HERE TODAY.
AND IT’S GOOD TO HEAR OF THE WORK THAT IS GOING ON AT HHS HERE AND ALSO THE DEPARTMENT
OF LABOR. AND I WANT TO BE GIVING A HUGE INTERNATIONAL
PERSPECTIVE ON WHAT’S GOING ON WITH WEB ACCESSIBILITY. AND TO START WITH, I THINK OF THE WEB AS ACCESS
TO THE WORLD. IT’S ACCESS TO NEWS, TO ONLINE LEARNING, TO
EMPLOYMENT, PARTICIPATION, EMERGENCY INFORMATION, HEALTHCARE, TELEMEDICINE, PERSONAL FINANCE,
SOCIAL NETWORKING, GAMES, ENTERTAINMENT. ANY OF THAT THAT ANYBODY WANTS TO GIVE UP?
I DON’T THINK SO. THERE IS A BILLION PEOPLE IN THE WORLD LIVING
WITH A DISABILITY, AND AS THE WORLD’S POPULATION COMES ONLINE, ALL THOSE PEOPLE ARE THINKING
“CAN I GET THE ACCESS TO EDUCATION THAT I NEED?”
“CAN I GET ACCESS TO EMPLOYMENT?” IF THERE IS A DISASTER IN MY AREA, WHAT WOULD
BE THE EMERGENCY EVACUATION ROUTE? IF I NEED TO ACCESS SERVICES AFTERWARDS, WILL
THE SITE BE ACCESSIBLE EVEN IF I LOST MY TECHNOLOGY AND HAVE A NOT SO GREAT CONFIGURATION?
CAN I DO BANKING ONLINE? AT THE END OF THE DAY, CAN I SIT BACK AND
RELAX THE WAY EVERYONE ELSE CAN WITH ACCESSIBLE GAMES ONLINE AND SO FORTH?
IF WE LOOK ACROSS THE WHOLE WORLD RIGHT NOW, 159 COUNTRIES HAVE SIGNED THE CONVENTION FOR
RIGHTS WITH PEOPLE OF DISABILITIES. WE’RE HOPING THAT THE U.S. ADVANCES ITS SIGNING.
BUT A LOT OF WHAT IS HAPPENING WORLDWIDE IN TERMS OF INTEREST IN WHAT ACCESSIBILITY IS
BEING DRIVEN BY THE PERSONS WITH DISABILITIES AND IN THE UNITED STATES, WE HAVE A VARIETY
OF DIFFERENT LAWS AND REGULATIONS THAT SPEAK TO THE ACCESSIBILITY OF INFORMATION TECHNOLOGY
FOR PEOPLE WITH DISABILITIES. ONE OF THE MOST IMPORTANT DRIVERS OF THAT
AMERICANS WITH DISABILITIES ACT, DEPARTMENT OF TRANSPORTATION.
THERE IS PROVISION COMING FROM MANY DIFFERENT LAWS.
508. INTERNATIONALLY, WHAT PEOPLE ARE LOOKING AT
IS THE CONVENTION, WHICH TALKS ABOUT ENABLING PERSONS WITH DISABILITIES TO LIVE INDEPENDENTLY
AND PARTICIPATE FULLY IN ALL ASPECTS OF LIFE, INCLUDING INFORMATION COMMUNICATION
IN ARTICLE 21, THE RIGHT TO FREEDOM OF EXPRESSION ON OPINION ON AN EQUAL BASIS WITH OTHERS,
INCLUDING INFORMATION AND ACCEPTABLE FORMAT IN ACCESSIBLE FORMAT IN TECHNOLOGY.
THEY PROVIDE AN UMBRELLA VIEW OF WHAT ACCESSIBLE TECHNOLOGY CAN BE WITH PEOPLE WITH DISABILITIES.
IT CAN FACILITATE ACCESS TO ALL THE OTHER AREAS OF LIFE.
SO I WORK FOR THE WORLDWIDE WEB CONSORTIUM, AND IN TWO WEEKS WE CELEBRATE OUR 20TH ANNIVERSARY
OF THE W 3C. IT’S AN INTERNATIONAL VENDORNEUTRAL COMMUNITY
AND IT DEVELOPS STANDARDS FOR THE WEB. IT ENCOMPASSES AN EXPANDING NEED OF TECHNOLOGY
AND IT’S INTERNATIONALLY HOSTED. THE COMPUTER SCIENCE AND ARTIFICIAL INTELLIGENCE
LAB THERE IS THE HOST FOR ACTIVITY IN NORTH AMERICA.
WE’RE ALSO BASED ON INFORMATICS AND MATH MAT MICS IN FRANCE
AND KAY UNIVERSITY IN JAPAN AND BANG HAY UNIVERSITY IN BEIGE.
AND ONE OF THE ASPECTS OF W 3C’S WORK IS A BELIEF AND A LOT OF ACTIVITYPROMOTING WEB
FOR ALL AND ACCESSIBILITY, DEVICE INDEPENDENCE. DIFFERENT PRINCIPLES TO ENABLE THE WEB OF
THE FUTURE TO BE USED BY ANYONE. AND THE DIRECTOR OF THE WC 3, ALSO THE INVENTOR
OF THE WEB GOT THE OPPORTUNITY TO TWEET FROM THE OLYMPICS WHEN THEY WERE HELD IN LONDON.
THIS IS FOR EVERYONE. LONDON.
HE WAS IN THE CENTER OF THE STADIUM THERE AND HIS TWEET WENT UP THE STAIRS AROUND THE
STADIUM AND PEOPLE LOVED THAT BECAUSE THAT’S REALLY THE PHILOSOPHY IN DEVELOPING AN INTERNATIONAL
FORUM WHERE PEOPLE COULD WORK TOGETHER TO BAILED WEB AND KEEP EVERYTHING AS OPEN AS
POSSIBLE WITH THOSE TECHNOLOGIES. AND THAT’S WHAT DRIVES A LOT OF THE WORK OF
THE PEOPLE WHO WERE THERE. ONE OF THE TRANSFORMATIONS THAT’S HAPPENING
RIGHT NOW IN TECHNOLOGY IS HTML 5. SO TYPE FEW YEARS AGO MOST OF THE DEVELOPMENT
WAS BASED ON HTML 4 AND THAT GIVES YOU SOME OF THE WEB PAGES THAT SOMETIMES MIGHT BE SLIGHTLY
DYNAMIC. 5 IS MUCH MORE THAN THAT.
IT’S ESSENTIALLY BRINGING THE COMPUTER OAF THE WEB AND SO THERE IS A GREAT DEAL MORE
CAPABILITY THAT HAPPENS WITH THAT. AND ONE IS THAT YOU CAN USE THIS ACROSS MANY
MORE DIFFERENT KINDS OF APPLICATIONS ON THE WEB.
YOU CAN USE IT FOR ESPECIALLY MUCH BETTER SUPPORTS GLOBAL.
YOU CAN USE IT FOR HEALTHCARE. YOU CAN USE IT FOR DIGITAL ENTERTAINMENT,
FOR DIGITAL PUBLISHING, FOR INSTANCE, THE INTERNATIONAL DIGITAL PUBLISHING FORUM WHICH
DOES THE EPUB STANDARD IS WORKS VERY CLOSELY WITH W 3 C AND WE COORDINATE TO USE THE SAME
FOUNDATION OF WEB TECHNOLOGIES AND THE SAME ACCESSIBILITY PROVISIONS.
HARMONIZE ACCESSIBILITY PROVISIONS SO THAT YOU CAN MAKE ALL OF THAT ACCESSIBLE.
USING THE WEB. THEY ARE STARTING TO.
AND TO THE EXTENT THAT THEY ARE ALSO USING WC 2 TECHNOLOGIES AND SOME OF THE OTHER MANUFACTURERS
ARE ALREADY, WHETHER IT’S FOR PASSENGER SIDE ENTERTAINMENT OR NAVIGATION, YOU CAN START
TO RELY ON THE SAME KINDS OF ACCESSIBILITY SOLUTIONS THERE.
AGAIN, WITH GAMES, WITH VIDEO AND TV, YOU BUILD IN THE SAME CORE OF TECHNOLOGIES, AND
YOU CAN USE SIMILAR AND PARALLEL FORMS OF ACCESSIBILITY THERE.
SO THE OPEN WEB PLATFORM IS WHAT WE CALL THIS COLLECTION OF TECHNOLOGIES BASED AROUND HTML
5 AND ENABLE WEB PAGES TO BE DESIGNED TO A MUCH HIGHER STANDARD OF AESTHETICS, TO BE
MORE INTERACTIVE AND SMARTER BECAUSE OF THE TECHNOLOGIES THAT YOU CAN EMBED WITHIN THAT
AND THE INFORMATION THAT YOU CAN SHARE. IT’S A STRONG PLATFORM FOR APPLICATIONS, SO
IT’S AN ALTERNATIVE PLATFORM FOR MOBILE APPS AND YOU CAN USE PLATFORMS THERE IN ACCESSIBILITY
AND THAT RELIES ON A BROADER IMPLEMENTATION OF 5 AND ALSO CASCADINGSTYLE SHEETS.
YOU GET RICHER MULTIMEDIA AND YOU GET MORE TOOLS ALSO FOR PRIVACY AND SECURITY AND IDENTITY
AND SO FORTH, WHICH HELP WITH SOCIAL NETWORKING. SO EACH OF THESE NEW TECHNOLOGIES REQUIRES
VIGILANCE WITH REGARD TO ACCESSIBILITY, AND THAT’S WHERE THE WEB ACCESSIBILITY INITIATIVE
COMES IN. WE LOOK AT THE NEW CHALLENGES THESE BRINGS
BRING. WE ALSO LOOK AT THE NEW OPPORTUNITIES THESE
BRING, AND WE LOOK AT THE INTEROPERABILITY ISSUES BETWEEN THE BROWSERS AND MEDIA PLAYERS
AND MOBILE DEVICES AND THE ASSISTIVE TECHNOLOGIES. WE LOOK AT IMPLEMENTATION TECHNIQUES AND SOMETIMES
WE HAVE TO BUILD DIBBLE SETS OF TECHNIQUES EVEN THOUGH THERE IS A HARMONIZED STANDARD
AND THEN GUIDELINE THAT WE HAVE TO TEST ALL OF THAT.
WE HAVE TO DEVELOP EDUCATIONAL MATERIALS FOR THAT.
SO IT FEELS LIKE WE’RE TRYING TO OUTRUN A SPEEDING TRAIN AS THE TECHNOLOGY EVOLVES.
AND THE WORK IS TO MAKE THIS PLATFORM ACCESSIBLE AS IT EXPANDS INTO ALL THESE DIFFERENT INDUSTRYVERTICAL
AREAS, EXPAND AS WE GO, THE WORK ACTUALLY INCREASES.
SO IN THE OPEN WEB PLATFORM YOU GET A COLLECTION OF THE HTML 5 FEATURES THAT SUPPORT ACCESSIBILITY
AND ADDITIONAL THINGS THAT ARE BUILT ON FOR ACCESSIBILITIES SUCH AS ACCESSIBLERICH INTERNET
APPLICATIONS AND THAT INCREASES THE DYNAMIC CAPABILITIES OF WHAT YOU CAN DO ON A WEB PAGE.
THERE IS ADDITIONAL THINGS THAT SUCH AS MARKUP PLAN AND SO FORTH FOR AUDIO, FOR CAPTIONING,
FOR MEDIA. THERE IS A PROLIFERATION OF GRAPHIC FORMAT
RIGHT NOW. SO IS BECOMING VERY POPULAR IN AMONG WEB DEVELOPERS.
IT WASN’T INITIAL BY INITIALLY A FORMAT THAT WAS VERY CONDUCIVE TO ACCESSIBILITY.
BUT BECAUSE THAT’S WHAT THE TWERPS WERE USING, WE HAD TO FIND OUT HOW TO MAKE CANVAS ACCEPT
ACCESSIBLE SO THAT IF SOMEBODY CAN’T SEE, INFORMATION IS BEING PRESENT INTERESTED IN
A GRAPHIC IMAGE, YOU CAN THROUGH THE TECHNOLOGY AND GET THE INFORMATION YOU NEED ON THAT.
SCALEABLE GRAPHICS MORE ACCESSIBLE CAPABILITIES IN THAT.
LAWN DESK IS A WAY TO PROVIDE MORE DETAILED INFORMATION ABOUT COMPLEX IMAGES.
SO THINK OF THE CRITICAL INFORMATION THAT’S PRESENTED IN INFOGRAPHICS THESE DAYS IN EMPLOYMENT
AREA OR SOMETHING, YOU NEED ALL THAT HAVE DETAIL TO BE ACCESSIBLE.
SO WE’RE ALREADY WORKING ON 5.1 AND WE’RE EXPANDING THE ACCESSIBILITY CAPABILITIES THERE.
SO THE WEB ACCESSIBILITY INITIATIVE IS ESSENTIALLY ONE OF THE DIVISIONS OF W 3 C’S WORK.
AND WE DO ALL OF OUR WORK IN A MULTISTAKEHOLDER WAY.
SO WE’RE BRINGING TOGETHER INDUSTRY, DISABILITY COMMUNITIES AND GOVERNMENT AND RESEARCH AND
THIS IS FROM ORGANIZATION AROUND THE WORLD. WE DO ALL OF OUR WORK IN A CONSENSUSBASED
APPROACH WHEREVER POSSIBLE. SO WE’RE BRINGING WE’RE TRYING TO FIND SOLUTION
THAT’S WILL WORK FOR ALL OF THESE PARTIES BECAUSE THOSE ARE THE ONES THAT ARE ACTUALLY
GOING TO GET USED. YOU DON’T WANT TO JUST BUILD ACCESSIBLE IDEAS
AND PUT THEM ON A SHELF. YOU WANT THESE TO GET DEPLOYED IN THE TECHNOLOGIES
THAT ARE IN EVERY BROWSER PLATFORM AND IN EVERYBODY’S HANDS AND THAT’S ONE OF THE BEAUTIFUL
THINGS OF WORKING IN THE WC 3 SYSTEM IS MOST OF WHAT WE WORK ON IS ABLE TO GET THERE AND
GET DIRECTLY USED. IT’S COMMUNITYRESPONSIVE IN THE SENSE THAT
FOR AN INDIVIDUAL STANDARD OR GUIDELINE, WE MAY END UP RESPONDING TO HUNDREDS OR THOUSANDS
OF PUBLIC COMMENTS AND GETTING AND CONTINUING TO REFINE THE TECHNOLOGY
UNTIL IT MEETS ALL THE DIFFERENT NEEDS THAT PEOPLE RAISE.
AND IT’S AN OPEN AND TRANSPARENT PROCESS. YOU CAN LOOK AT EVERYTHING WE ARE DOING ONLINE.
IT’S ARCHIVED. AND YOU CAN CONTRIBUTE TO THAT.
SO WE PURSUE THE WEB ACCESSIBLE INITIATIVE WORK FOR A VARIETY OF ACTIVITY AND IT’S A
FOUNDATION LAYER IS TO MAKE ALL OF W 2C’S TECHNOLOGIES BE ABLE TO SUPPORT ACCESSIBILITY
AT A GIVEN TIME IT’S WORKING ON 70 DIFFERENT TECHNOLOGIES, DIFFERENT STANDARDS AND SPECIFICATIONS
ON VARIOUS THINGS AND IT MAY BE PRIVACY OR A GRAPHICS OR SEVERAL SO WE’RE REVIEWING ALL
OF THOSE. WE DEVELOPED THE ACCESSIBILITY GUIDELINES
AND WHEN THESE ARE FINISHED, THEY DO GET THE DESIGNATION OF A STANDARD.
THE GUIDELINES HAVE IS CALL ACTUALLY BEEN DWARFED BY THE INTERNATIONAL STANDARDS ORGANIZATION.
WE DO A LOT OF WORK ON CONFORM ANCE AND EVALUATION. SO THAT PEOPLE CAN LEARN HOW TO BETTER ASSESS
WEBSITE FOR ACCESSIBILITY AND ALSO WE NEED TO DO THAT FOR THE BROWSERS AND AS WELL.
EXCUSE ME. WE ALSO HAVE AN EFFORT TO COORDINATE WITH
RESEARCH AND DEVELOPMENT BECAUSE OF THAT SPEEDING TRAIN.
GRAPHIC DEVELOPMENT OF TECHNOLOGY, WE HAVE TO BE LOOKING AHEAD OF WHAT’S COMING DOWN
THE TRACKS AT US NEXT. WHAT ARE THE POTENTIAL ACCESSIBILITY ISSUES?
HOW DID CAN WE GET RESEARCHERS AND DEVELOPERS TO UNDERSTAND THE FULL SPECTRUM OF HUMAN ABILITIES
AND NEEDS AND TO PLAN FOR THAT AS THEY ARE DESIGNING THINGS?
WE HAVE A GREAT DEAL OF MATERIAL IN EDUCATION OUTREACH.
AND AGAIN IT’S SO TO SERVE MANY DIFFERENT KINDS OF AUDIENCES.
SOME TECHNICAL AUDIENCE, MANAGERS. SO THERE ARE MANY DIFFERENT THINGS WE NEED
TO ADDRESS THERE. THERE IS A CONSTANT NEED FOR MORE AND BETTER
RESOURCES FOR EDUCATION AND TRAINING. WE ALSO PUT A LOT OF ENERGY INTO STANDARD
HARMONIZATION. SO WITH REGARD TO WEB ACCESSIBILITY, WHEN
PEOPLE ARE USING THE SAME INTERNATIONAL STANDARDS FOR WEB ACCESSIBILITY, YOU CAN MOVE A LOT
FASTER. YOU’RE NOT SPENDING SEPARATE ENERGY TO DEFINE
ACCESSIBILITY DIFFERENTLY FOR THIS PARTICULAR AREA VERSUS THAT PARTICULAR AREA OF WORK OR
EVEN FROM ONE COUNTRY TO ANOTHER. BECAUSE IT IS SO INTERNATIONAL THERE IS A
GREAT EFFICIENCY OF EFFORT IF PEOPLE ARE USING THE SAME STANDARDS.
AND IN FACT, THE BROWSERS CAN THEN BETTER SUPPORT THAT, PARTICULARLY THE AUTHORING TOOLS
CAN BETTER SUPPORT THAT. IF THERE IS A COMMON STANDARD, THEN THERE
IS A THERE IS A MARKET INCENTIVE TO PROVIDE SUPPORT FOR THAT AND EVALUATION TOOLS.
SO WE CONTINUE TO PROMOTE HARMONIZATION AND WE’RE VERY HAPPY TO SEE THAT IN THE U.S. THERE
HAS BEEN INCREASED INTEREST IN HARMONIZATIONS AND WE LOOK FORWARD TO ADDITIONAL PROGRESS
IN THAT WHERE. SO WITH REGARD TO ACCESSIBILITY GUIDELINES,
WE WANT TO HAVE SOMETHING THAT CROSS MANY DIFFERENT AREAS.
WHETHER OR NOT SOMEBODY CAN SEE THE CONTENT OF THE WEBSITE, WHETHER OR NOT THEY COULD
HEAR WELL. HEAR OR SEE WELL.
IF SOMEBODY IN THEIR HANDS AND NEED ADDITIONAL TIME.
SPEECH. WE DON’T WANT A WEBSITE THAT RELIES ONLY ON
SPEECH FOR INPUT BECAUSE NOT EVERYONE HAS THAT SAME SPEECH CAPABILITY.
COGNITIVE. THERE IS A GREAT VARIETY A GREAT VARIATION
IN COGNITIVE ABILITY, INCLUDING MEMORY, DISTRACTABILITY, LEARNING ABILITY AND SO FORTH.
NEUROLOGICAL. IF A SITE IS FLASHING AT SOMEBODY, THAT COULD
CAUSE SPASMS OR SEIZURE AND DISABILITIES DON’T NECESSARILY COME IN
ONE AT A TIME. SOMETIMES PEOPLE HAVE MULTIPLE DISABILITIES
AND SO A WEBSITE CONTENT NEED TO TAKE ACCOUNT FOR AGERELATED CONDITIONS.
SOMETIMES THERE ARE SMALL CHANGES AND PEOPLE WON’T SAY I HAVE A DISABILITY BUT ON THE OTHER
HAND THEY MAY HAVE A FEW CHANGES IN VISION OR HEARING OR MEMORY OR DEXTERITY AND THEY
CHANGE. SO WITH THE WEB CONTENT ACCESSIBILITY GUIDELINES,
AT A VERY HIGH LEVEL, WE BROKE THIS DOWN INTO FOUR MAIN PRINCIPLES.
THAT INFORMATION SHOULD BE PERCEIVABLE AND OPERABLE AND UNDERSTANDABLE, THEN IT SHOULD
BE ROBUST. AND ON A PRACTICAL LEVEL AND THESE ARE THE
GUIDELINES THEMSELVES SO THAT MEANS THINGS SUCH AS IF THERE ARE ALTERNATIVES FOR NONTEXT
CONTENTS. PROVIDES CAPTIONS FOR MULTIMEDIA.
CREATE CONTENT THAT CAN BE PRESENTED IN DIFFERENT WAYS.
YOU DON’T KNOW WHAT KIND OF DEVICE SOMEBODY’S USING TO LOOK THE YOUR CONTENT.
AND YOU DON’T KNOW WHAT KIND OF CONTRACT SETTING. SO NEED TO DESIGN FLEXIBLY.
MAKE IT EASIER FOR PEOPLE TO SEE AND HEAR CONTENT SO THAT MEANS PAY ATTENTION TO THE
CONTRAST RATIOS AND SO FORTH IN IMAGES. WITH REGARD TO OPERABILITY YOU WANT TO MAKE
ALL FUNCTIONALITY AVAILABLE FROM A KEYBOARD THAT USES TIME TO READ AND USE CONTENT.
DON’T USE CONTENT THAT CAUSE SEIZURES. NAVIGATE AND FIND CONTENT.
AND THESE ARE.^ EXAMPLES OF THINGS. SO ALL OF THIS IS FINDABLE ON THE WEB AND
PARTICULARLY IF YOU LOOK AT A GLANCE OR THE STANDARD ITSELF, WHICH IS TO GIVE EXAMPLES.
UNDERSTANDABLE AND PAY ATTENTION TO READABILITY AND PREDICTABILITY ON A PAGE
TESTIMONY MAKES IT EASIER FOR PEOPLE TO LEARN AND USE THE SITE.
HELPS USERS AVOID MISTAKES AND MAXIMIZE CAPABILITY WITH CURRENT AND FUTURE USER TOOLS.
YOU MAY THINK HMM, THAT’S A LOT TO KEEP IN MIND BUT WE PACKAGE THAT ALL INTO A GUIDELINE.
SO ONE WAY TO THINK ABOUT THE WEB SPACE IS TO THE SPACE WE NEED TO MAKE ACCEPTABLE IS
ACCESSIBLE IS TO THINK OF THE DEVELOPERS ON ONE HAND AND THE CONTENT THE DEVELOPERS ARE
REVIEWING AND THEN THERE IS THE USERS. AND AT THE BOTTOM OF THAT THERE IS A LAYER
OF A FOUNDATION AND WE NEED ALL THE TECHNOLOGIES THAT THIS WEB IS ON TO BE ABLE TO SUPPORT
ACCESSIBILITY. IT HAS TO BE ABLE TO CARRY CAPTIONS FOR AUDIO,
RIGHT? IT HAS TO BE ABLE TO CARRY DESCRIPTIONS FOR
VIDEO. SO THAT’S THE CAPABILITY IF YOU WANT TO BUILD
INTO THE FOUNDATION. AND THEN THE GOAL IS TO MAKE SURE THAT ACCESSIBLE
SO THE WEBCONTENT ACCESSIBILITY GUIDELINES IS WHAT DESCRIBES THAT GOAL.
THE ACCESSIBLE CONTENT PRODUCTION, WE HAVE GROUPS FOR THE AUTHORING TOOLS SO THAT AUTHORING
TOOLS TOOL DEVELOPERS NOTE THINGS TO DO IN THEIR SOFTWARE THAT WILL ACTUALLY MAKE IT
EASIER FOR PEOPLE TO USE TO CREATE ACCESSIBLE WEB CONTENT.
AND THEN ALSO THERE IS EXCUSE ME. THE ALARM IS GOING OFF.
SO THERE IS ALSO THE BROWSEERS AND MEDIA PLAYERS AND MOBILE AND WE HAVE GREENS FOR THAT AS
WELL. SO THIS IS THE SPACE THAT WE HELP DEFINE WITH
AN INTEGRATED SET OF ACCESSIBILITY SOLUTIONS AND RIGHT NOW THE WEB CONTENT ACCESSIBILITY
GUIDELINES ARE VERY STABLE AND WILL BE FOR THE FORESEEABLE FUTURE.
BUT THE TECHNIQUE THAT GO WITH THOSE, THE TECHNIQUES FOR DEVELOPERS WE’RE UPDATING AT
AN INCREASING PACE. WE USED TO UPDATE THEM EVERY YEAR AND A HALF
AND NOW WE’RE UPDATING THEM EVERY HALF YEAR. SO THERE WILL BE FRESH TECHNIQUES FOR MORE
P MORE AREAS. SO MAY BE SCRIPTING, NEW AREAS.
THE AUTHORING TOOL ACCESSIBILITY GUIDELINES ARE IN IMPLEMENTATION TESTING RIGHT NOW, SO
WE’RE LOOKING ACROSS MANY DIFFERENT SWEEPS OF AUTHORING TOOLS AND THEY ARE PROVING OUT
THEIR COMPATIBILITY WITH THE GUIDELINES SO WE HAVE TO HAVE RESULTS WITHIN THE NEXT
SEVERAL MONTHS AND THEN BEFORE IT BECOMES A FINISHED AND STANDARD WHEN IT’S DONE
USER AGENT ACCEPTABLE GUIDELINES. WE’VE BEEN TAKING IN AND PROCESSING THOSE,
THE COMMENT AND THEN WE’LL MOVE TO IMPLEMENTATION TESTING.
I WANT TO GIVE YOU AN IDEA THE KIND OF EDUCATIONAL RESOURCES THAT ARE THERE.
AGAIN, THESE ARE DEVELOPED AND USED WITH IMPORTS INPUT FROM AROUND THE WORLD.
BUT VERY USEFUL FOR THE U.S. AS WELL HERE. SO THE PRINCIPLES, THE GUIDELINES THE SUCCESS
CRY TIER, WHICH IS THE NORMATIVE LAYER FOR THE WEB CONTENT ACCESSIBILITY GUIDELINES.
THAT’S ALL PART OF THE STABLE GUIDELINES AND THEN WITH INFORMATIVE MATERIAL THAT WE
KEEP VERSIONING UP FREQUENTLY TECHNIQUES, EXAMPLES, BENEFITS.
AND THEN QUICK REFERENCE TO OTHER KINDS OF EDUCATIONAL MATERIALS TRAINING RESOURCES THAT
WE’RE HOPING TO DEVELOP FURTHER. THOSE ARE ALL THINGS THAT WE CAN CHANGE AND
KEEP UPDATED. AND THE QUICK RECORDS PANEL IS SOMETHING WHERE
YOU CAN GO AND SAY IF YOU HAVE HOW MANY PEOPLE HERE ARE DEVELOPERS?
I WAS THINKING MOST PEOPLE IF YOU’RE A DEVELOPER YOURSELF, YOU CAN USE THIS CUSTOMIZATION PANEL
AND SAY THESE ARE THE TECHNOLOGIES I’M USING ON MY SITE AND I WANT TO DEVELOP AND SEE ALL
OF THE TECHNIQUES THAT ARE AVAILABLE FOR THOSE. AND THE SUFFICIENT TECHNIQUES AND THE ADVISORY
TECHNIQUES AND YOU CAN LEAVE YOUR SETTINGS THAT WAY AND USE THAT TO TAP INTO AND SEE
THE ADVICE THERE. THERE ARE RESOURCES SUCH AS THE BEFORE AND
AFTER DEMO KNOWN AS DAD. DAD IS A WEBSITE THAT IS COMPLETELY INACCESSIBLE
AND A WEBSITE THAT IS VERY ACCESSIBLE. THEY LOOK JUST THE SAME AND WE TALK YOU THROUGH
IT. THERE IS ANNOTATION THAT’S SHOW WHAT THE PROBLEMS
ARE, WHAT THE AREAS, THE FIRST VERSION CREATES AND THEN WHAT YOU CAN DO ABOUT THAT.
THERE ARE THINGS LIKE EASY CHECKS AND SO THIS WOULD BE FOR SOMEBODY WHO IS NEWER TO ACCEPT
ACCESSIBILITY. YOU CAN GO THERE AND SAY HMM, WHAT ARE SOME
QUICK AND DIRTY THINGS TO FIND OUT THE STRUCTURAL ELEMENT OF MY PAGE OR THE IMAGES CAUSING PROBLEMS
FOR PEOPLE. I DON’T WANT TO SHUT PEOPLE OUT.
THIS IS THE FIRST PLACE TO CHECK. WE’RE ALSO DEVELOPING A MORE FORMAL CONFORMANCE
EVALUATION METHODOLOGY TO WALK YOU THROUGH THE PROPER STEPS TO CHECK AND SEE IF YOU ARE
IN CONFORMANCE AT THE LEVEL YOU SHOULD BE. THE EASY CHECK IS JUST AN INFORMAL LOOK.
WE HAD A SERIES OF TUTORIALS. SO IF THERE IS A PARTICULAR AREA YOU OR YOUR
DEVELOPERS ARE HAVING PROBLEMS WITH IMAGES, NAVIGATION TABLES, YOU CAN LOOK AND GET RESOURCES
THERE. SO ONE OF THE WAYS THAT WE ORGANIZE OUR WORK
USUALLY IN WORKING GROUPS AND THESE ARE FAIRLY WE HAVE ABOUT TEN OF THOSE AND SO THOSE GO
IN DIFFERENT GUIDELINES, YEARS, OR SPECIFIC WORK, LIKE DUI.
BUT THE TAB FORCES TAKE ON TOPICS THAT SOMETIMES NEED TO BE MOVING FASTER OR MAY SPAN MULTIPLE
WORKING GROUPS. HOW MANY PEOPLE HERE ARE INTERESTED IN MOBILE
ACCESSIBILITY BECAUSE OKAY. SO AT LEAST HALF THE HANDS IN THE ROOM.
THERE IS KIND OF A MYTH THAT THE WEB CONTENT ACCESSIBILITY GUIDELINES ARE FOR OLDFASHIONED
WEBSITES WEBSITES AND THEY DON’T HAVE ANYTHING TO DO WITH MOBILE.
IN FACT, THEY ARE FULLY OPERABLE APPLICABLE TO MOBILE CONTENT AND ALSO VERY HELPFUL FOR
MOBILE APPLICATIONS AND IF YOU COMBINE THAT WITH A GUIDANCE AND GUIDELINES, YOU GET NEARLY
FULL COVERAGE. WHAT WE’RE HEARING, THOUGH, IS THAT PEOPLE
ALSO WANT TECHNIQUES, DEVELOPERS’ TECHNIQUES FOR HOW TO MAKE MOBILE APPS AND CONTENT ACCESSIBLE.
SO WE HAVE A TASK FORCE WORKING ON THAT. THE GAP ANALYSIS FOUND ONLY 3 OR HAD THINGS
THAT WEREN’T COVERED BUT THEY FOUND A BIG NEED FOR SPECIFIC TECHNIQUES THAT SPEAK TO
MOBILE DEVELOPERS BETTER. SO KEEP WATCHING THAT AND YOU CAN FIND RESOURCES
ON THAT. WE DO HAVE A MOBILE ACCESSIBILITY RESOURCE
PAGE WHICH IS W 3.ORG/WAI/MOBILE AND THAT MAKES US EASY TO FIND.
COGNITIVE ACCESSIBILITY WAS SOMETHING THAT WE DID SOME WORK ON IN OUR GUIDELINES BUT
NOT AS MUCH AS WE WANTED. AND I THINK THAT’S SOMETHING THE U.S. GOVERNMENT
HAS ALSO BEEN LOOKING AT THE NEED FOR AND ONE OF THE HARMONIZATION REASONS THAT WE’RE
WORKING TO TOGETHER ON SOME THINGS. SO WITH REGARD TO ACCESSIBILITY, WE HAVE A
TASK FORCE WORKING ON THAT AND THEY ARE DOING A SCAN ACROSS THE ENTIRE WEB ACCESSIBILITY
INITIATIVE SPACE LOOKING NOT ONLY AT WEB CONTENTS BUT AT ALL THE OTHER AREAS OF OUR WORK AND
SEEING ONE AFT APPROACHES THAT ARE MISSING? HOW CAN WE DESIGN BETTER FOR THOSE?
ACTUALLY, COGNITIVE AND LEARNING DISABILITY TASK FORCE
IF THAT IS SOMETHING YOU ARE INTERESTED IN, LET US KNOW.
MEDIA ACCESSIBILITY, PARTLY BECAUSE OF THE WORK THAT WAS GOING ON WITH SEC, VIDEO ADVISORY
COMMITTEE AND THE 21ST CENTURY ACT, WE WERE ALSO LOOKING BACK AT SOME OF THE SPECIFICATIONS
AND REALIZING WE NEED MORE GRANUL ARITY IN SOME OF THE MEDIA GUIDANCE AND TECHNIQUES.
SO WE HAVE A VERY DETAILED REQUIREMENTS POLICE AND THAT HAS GOTTEN FED INTO THE WORK FORCE
W 3C’S AND OTHER STANDARDS. GRAPHICS ACCESSIBILITY.
AS THE WEB CONTINUES TO EVOLVE, WE SEE INCREASED ACCESSIBILITY SUPPORT NEEDED ACROSS MANY DIFFERENT
AREAS, INCLUDING SCALEABLE METRIC GRAPHICS. AND WITH THE EVALUATION METHODOLOGY WE HAVE
A NOTE NOW EVALUATION METHODOLOGY. AND HOPEFULLY THAT’S BEING USEFUL AND INTERESTING
AND FEEDBACK IS ALWAYS WELCOME. ONE OF THE OTHER THINGS THAT WE DO IS WE LOOK
AT DEDICATED AREAS WHERE THERE ISN’T A SPECIFICATION COMING FROM THE MAINSTREAM AREA AND WE NEEDED
AN ACCESSIBILITY LAUNCH. ONE OF THOSE IS THE ACCESSIBILITYRICH APPLICATIONS.
THAT GOT RELEASED AS A FINISHED STANDARD IN MARCH DURING THE MIDDLE OF THE CONFERENCE.
SO THAT WAS A BUSY CONFERENCE AND AGAIN, THAT GETS INTERNATIONAL COVERAGE
AND THAT PROVIDES A LOT MORE OPPORTUNITY FOR ACCESSIBLE DYNAMIC INTERACTIVE CONTENT.
AND SIMILARLY IN THE UI IT’S SOMETHING WE’RE WORKING ON AND THE CONTEXT AND THAT GIVES
YOU MORE CAPABILITY UNDER MOBILE DEVICES TO TAKE ANY DIFFERENT KIND OF INPUT SCROLLING,
GESTURE AND TRANSLATE THAT MUCH MORE EFFICIENT I THINK GET THE ACCESSIBILITY IMPLICATION
FORS DEVELOPERS THERE. THAT’S ONE OF THE THINGS IN DEVELOPMENTAL
STAGE WATCHING THAT. SO BEING PART OF THE SOLUTION, THERE ARE MANY
DIFFERENT THINGS YOU CAN FIND ON OUR WEBSITE WC.ORG/WAI.
THERE IS SECTIONS FOR DESIGNING FOR INCLUSION AND THERE IS A CUSTOMIZABLE BUSINESS PAGE
IF YOU NEED THAT. IMPLEMENTATION GUIDANCE FROM PROJECT MANAGEMENT
VIEWPOINT. GUIDELINES, TECHNIQUES, STANDARDS.
EVALUATION RESOURCES, WHERE JUST ABOUT WE’RE JUST ABOUT TO IN THE NEXT THREE WEEKS TO UPDATE
THE EVALUATION TOOL AND THERE IS ACTUALLY HUNDREDS OF DIFFERENT KINDS OF EVALUATION
TOOLS. PRESENTATIONS AND TUTORIALS WE’RE ADDING,
TOO, AND THERE IS INFORMATION ON HOW TO GET INVOLVED WITH THE NICHE INITIATIVE IF YOU
KNOW PEOPLE INTERESTED. AND THERE ARE THINGS WHERE WE NEED MORE PEOPLE
AT THE TABLE. WE NEED PARTICULAR SKILLS SET.
IF THERE IS THINGS THAT PEOPLE ARE INTERESTED IN DOING.
SOMETIMES IT’S DESCRIBING USER NEED. IF YOU THINK WE’RE MISSING SOME AREA OF ACCESSIBILITY,
YOU CAN GIVE US THAT FEEDBACK. WE CAN WRITE THAT UP AS CASES AND DIRECTLY
IMPACT A STANDARD THAT WAY. WE’RE ALSO LOOKING AT WAYS TO FOSTER MORE
ACCOUNTABLE ACCESSIBILITY. SO IF YOU LIKE DOING SOFTWARE REVIEWS, THERE
ARE WAYS TO PARTICIPATE TEST ORGANIZE DO THIRD PARTY REVIEWS.
IF THERE WERE MORE DIALOGUE ON THE ACCESSIBILITY SUPPORT AND BROWSERS AND AUTHORING TOOLS,
MAYBE THAT MUTE HELP MOVE ALONG SOME OF THE PROGRESS IN THOSE AREAS.
AND WE CAN USE HARMONIZED UPTAKE OF STANDARDS. THERE IS A LOT THAT WE DO BEHIND THE SCENES
TO LOOK AT NEW STANDARDS FOR THE COMING UP THAT ARE COMING UP.
LOOK AT HOW TO BUILD RELATIONSHIPS WITH THE RESEARCHERS AND DEVELOPERS THERE.
REVIEW THOSE STANDARDS AS THEY ARE IN DEVELOPMENT. NEGOTIATE SOLUTIONS WITH THEM.
SO ANYONE INTERESTED IN THAT KIND OF WORK IS ALWAYS AUTOMOBILE TO HELP.
LOOKING AHEAD, WE HAVE A VERY STABLE STANDARD RIGHT NOW.
AND WE EXPECT IT TO BE THAT WAY FOR THE FUTURE. BUT WE ALSO NEED TO LOOK AHEAD A NUMBER OF
YEARS AND SAY WHAT ARE THE TRENDS IN THE TECHNOLOGIES? WHAT ARE THE NEEDS IN TERMS OF ACCESSIBILITY
GUIDELINES AND STANDARDS AND PARTICULARLY, AS THE WEB GOES AWAY TRADITIONAL WEB TO MOBILE,
TO AUTOMOTIVE, TO BROADCAST AND PUBLISHING. SO WE’RE STARTING TO HAVE A DIALOGUE FOR THAT
IN THE FUTURE. AND IF THERE ARE PEOPLE INTERESTED IN TALKING
WITH US ON THAT, PLEASE LET US KNOW. SO IF YOU THINK ABOUT THAT ENTIRE SPACE OF
THE OPEN WEB PLATFORM AND WANTING TO ENSURE THAT ALL OF THOSE AREAS REMAIN OR BECOME BARRIERFREE
FOR PEOPLE WITH DISABILITIES, PLEASE TALK WITH US, PLEASE USE OUR RESOURCES AND TELL
US WHAT YOU NEED THAT WE DON’T HAVE YET AND WE’LL TRY TO GO BACK.
SO THANK YOU. I REALLY APPRECIATE THE CHANCE TO TALK WITH
YOU TODAY AND I WANT TO THANK THE SUPPORT FROM NIIL,
THE NATIONAL INSTITUTE ON INDEPENDENT LIVING AND REHABILITATION RESEARCH, WHICH IS BEEN
THROUGH THE DEPARTMENT OF EDUCATION AND I BELIEVE IT’S IN THE PROCESS OF MOVING TO HEALTH
AND HUMAN SERVICES AND ALSO OUR OTHER SPONSORS. SO THANK YOU VERY MUCH. [APPLAUSE]>>WE HAVE A COUPLE OF MINUTES TO TAKE QUESTIONS,
FROM THE AUDIENCE. I’M SURE THAT THERE ARE PROBABLY MANY.
WE ALL DEPEND UPON WORLDWIDE WEB CONSORTIUM FOR MUCH OF WHAT WE DO.
ANYTHING?>>DON’T BE SHY.
IT COULDN’T HAVE BEEN ALL THAT CLEAR. ANYONE?
>>HI, THANK YOU VERY MUCH FOR THAT. I’M KATHY MCCRORY, A CONSULTANT FOR NIDER
RIGHT NOW AND ONE THING I WAS WONDERING ABOUT IS WHERE
IN THESE GUIDELINES MORE DYNAMIC TYPES OF VISUALIZATIONS COME IN?
FOR EXAMPLE, WITH MAPS THAT MIGHT BE DEVELOPED FROM BIG DATA AND DO THEY FIT OR ARE YOU THINKING
ABOUT THEM OR WHAT’S THE NEXT STEP WITH THEM?>>LOVE YOUR QUESTION.
THAT’S ONE OF MY PERSONAL INTERESTS ACTUALLY IS DATA VISUALIZATION AND GOING INTO THE INTERACTIVE
INFOGRAPHICS. I THINK THIS IS AN EXTREMELY IMPORTANT AREA
FOR ACCESSIBILITY, AND NOW SOME OF THE WORK WE’VE JUST BEEN FINISHING IS SOME OF THE ACCESSIBILITY
CANVAS 2D. THERE IS MORE WE NEED TO DO WITH 3D AND OTHER
THINGS. THE DYNAMIC INTERACTIVE VISUAL ACCESSIBILITY
IS REALLY AN AREA WE DO NEED TO WORKING ON MORE.
I WOULD BE INTERESTED IN TALKING WITH YOU MORE ABOUT THAT.
WE HAVE SOME IDEAS, BUT WE DON’T HAVE A SPECIFIC SOLUTION AVAILABLE YET IN DETAIL ON THAT.
YOU CAN STILL USE THE WEB CONTENT ACCESSIBILITY GUIDELINES FOR THE BASICS OF HOW TO MAKE THAT
ACCESSIBLE, BUT THERE IS SO MUCH MORE POTENTIAL IN THAT AREA.
ANYONE ELSE? HAND IN THE BACK.
>>MY WE IS RELEVANT TO SORTING AND FILTERING INFORMATION IN DATABASES.
I’VE FOUND A RELUCTANCE TO HAVE ACCESSIBILITY TO SORTING AND FILTERING.
I WAS WONDERING WHAT YOUR TAKE IS ON THOSE TYPES OF FUNCTIONS AND FEATURES AND DATABASES?
>>SO THE CONCERN IS CERTAINLY AN AREA THAT IS VERY IMPORTANT TO BE ACCESSIBLE.
AND AGAIN, THE BASIC GUIDANCE IN THE WEB CONTENT ACCESSIBILITY GUIDELINES I BELIEVE ADDRESSES
THAT. ONE OF THE ISSUES WOULD BE WHAT TECHNOLOGY
A PARTICULAR WEBSITE IS USING AND SO I KNOW WITH W 3C STANDARDS, SUCH AS
EXPERIENCE, WHICH WOULD HAVE PERHAPS BEEN ONE OF THE ONES USED MORE IN THE PAST BUT
MAY STILL BE. WE HAD REVIEWED THAT FOR ACCESSIBILITY.
THERE WERE NOT ISSUES THERE. BUT TYPICALLY IT WOULD BE FOLLOWING THE SAME
PRINCIPLES AND GUIDELINES THAT ARE IN THE WEB CONTENT ACCESSIBILITY GUIDELINES
AND THEN PARTICULARLY PARTICULAR TECHNIQUES THAT WOULD BE NEEDED FOR THE SORTING AND CLEARING
FUNCTIONS AND SOMETIMES THE TECHNIQUES WOULD BE BASED
ON A PARTICULAR WHICH PARTICULAR TECHNOLOGY YOU ARE USING FOR THAT DATABASE FRONT END
THERE. SO I CAN LOOK AND SEE IF THERE IS A GAP THERE
IN OUR RESOURCES. I DON’T BELIEVE THERE IS BUT IT COULD BE THAT
THERE ARE SOME ADDITIONAL TECHNIQUES THAT ARE NEEDED.
>>I BELIEVE WE ARE USING ORACLE.>>OKAY, SO THE ORACLE DEVELOPMENT ENVIRONMENT
IS, I WOULD SAY, SOMEWHAT DIFFERENT FROM SOME OF THE W 3C’S QUERY TECHNOLOGIES.
AND MAYBE WE CAN TALK AFTERWARDS AND GET FAMILIAR WITH SOME OF THE ISSUES THERE.
AND I THINK THERE IS ALSO A TEAM IN ORACLE THAT PROVIDES SOME MORE DETAILED SOLUTIONS
ON ACCESSIBILITY THERE. BUT THAT’S A LITTLE BIT MORE OUT OF MY AREA.
I’D BE HAPPY TO CHAT, THOUGH, AFTER.>>THANK YOU.
>>JUDY. ONE OF THE THINGS THAT IS A CHALLENGE FOR
US OBVIOUSLY, AS FRANK TALKED ABOUT. WE’RE DOING WORLDWIDE ACTIVITY JUST LIKE YOU,
AND ONE OF THE REAL CHALLENGES WE’RE FINDING IS COLLABORATION TECHNOLOGIES.
AS WE’RE WORKING WITH OUR PARTNERS WORLDWIDE AND TRYING TO FIND STANDARDBASED MECHANISMS
FOR HAVING THOSE KIND OF DYNAMIC CONVERSATIONS AND SOLVE SIGNIFICANT PROBLEMS ON THE FLY.
CAN YOU SPEAK TO THAT A LITTLE BIT?>>SO SO FAR THIS IS A VERY IMPORTANT AND
RELEVANT SET OF QUESTIONS. SO COLLABORATION TECHNOLOGIES ENCOMPASS A
LOT OF DIFFERENT THINGS IN TERMS OF THE PIECES THAT YOU NEED TO MAKE ACCESSIBLE
AND I AM GOING TO SAY THE BASIC GUIDANCE ON THAT WOULD BE IN BUT ALSO I AM THINKING THAT
SOME OF THE USER AGENTS FERTILE WOULD BE PARTICULARLY USEFUL.
WE DON’T HAVE THE SAME PATTERN OF IMPLEMENTATION TECHNIQUES FOR U. N. BECAUSE THE DEVELOPERS
SAID THEY DIDN’T REALLY WANT THAT. SO WE DID IMPLEMENTATION EXAMPLES.
I AM CURIOUS IF I LOOKED AT THE USER AGENT ACCESSIBILITY GUIDELINES RECENTLY, INCLUDING
THE EXAMPLES. BECAUSE MY GUESS IS THAT WE DON’T HAVE COLLABORATION
EXAMPLES IN THAT SET AND THAT’S ACTUALLY AT A STAGE WHERE WE CAN
CHANGE THAT. THERE IS STILL TIME TO DO THAT.
SO IF YOU ARE INTERESTED IN WORKING ON THAT WITH US, THAT WOULD BE IMPORTANT TO ADDRESS
AND I KNOW WITH REGARD TO [LAUGHTER] THE KIND OF REMOTE INTERACTION WHITE BOARD USAGE IS
A FASCINATION COLLECTION AND WE DO REALLY NEED EXAMPLES THAT SHOW DEVELOPERS WHAT THEY
SHOULD AND WHAT THEY SHOULD BE DOING NOW.>>THANK YOU SO MUCH.
GREAT.>>THANK YOU VERY MUCH AND THANK YOU FOR THESE
(energetic music) (audience applauding) – Hey, hello, it is really nice to be here in Amsterdam again. So yeah, as Tab said, I’ve
kind of been doing things on the web for a very long time. I do all kinds of things,
it’s very hard for me to tell conferences exactly
what they should put on my badge as my kind of job. I do lots of things, let’s say importantly I am the W3C representative for Fronteers, I’ve been asked to mention that we have a meetup this evening which you can come along to, I’ll be speaking at that as well, because I like to speak
about CSS twice in one day. So do come along though,
it should be good fun. So really for this talk though, I’ve been really teaching CSS for as long as I’ve been writing CSS and
that’s kind of about 20 years. I’ve written an awful lot of books and articles and so on. And one of those books
was titled, not by me, as, “Everything You Know About CSS is Wrong”. And it was a ridiculous title. But maybe today I could
almost justify using that. Because I’ve taught CSS and CSS for layout in pretty much the same
way everybody else has. This is a block thing,
this is an inline thing. You can change the things
between block and inline. Hey, this is the box
model, it’s very important. But it’s also a bit weird. And then we do this stuff
with widths and floats to try and make something
that looks like a grid. And over the past few
years I’ve been writing and speaking about our new layout methods. I’ve been talking about Flexbox and Grid and I’m constantly reordering my material, often kind of on the fly in
front of people in workshops as I kind of hear questions
that don’t quite make sense and I realize that
people haven’t quite got what we’re teaching. And it’s become apparent to
me that the way that we have taught CSS doesn’t really
work with the new systems that we’re creating. It’s not giving people the
ability to master new layout. And more than that, more
importantly than that, I think that our continued
teaching and talking about CSS as if it’s some
kind of weird, quirky thing encourages people to not take
it seriously as a language. And to do all they can to
kind of avoid using features that are part of the language. So in this talk, I’m going
to describe CSS Layout as a system in a way that I
believe we need to set it out. How we need to set out our
store when we talk to people about CSS Layout. And I’m doing this not to teach you CSS, ’cause I’m pretty sure that
most of you in this room know a lot of this stuff, but to show you how to talk about CSS to your teams, or when you’re writing
articles or teaching people or answering questions on Twitter, ’cause I think a lot of us are teaching, even if we wouldn’t
call ourselves teachers. Because I believe that
if we want this language to be seen as a real language, as something important and elegant, and to be seen in the same
light as other things, we really have to start talking about it in that way, in the way that
we want it to be treated. Other languages, when we
approach them with beginners, if we’ve got a complete
beginner to programming, we begin with the important
constructs of working with those languages. So you know, if you’re
variables, basic math, string handling, conditional logic. You do all of that
before you start saying, well, hack around with this website. With CSS what we do is we
teach a couple of things, and then we just start getting people to poke things around and
hope that it sort of works. They’re not giving them
a best way to start on a good footing, and it’s no wonder then that people become reliant on frameworks often going to Stack Overflow and just copying and pasting
the nearest thing they see. And asking questions, even a
very long way down the line of them working with CSS
that make you realize that they don’t actually understand what is going on in the language
when they’re doing things. So this is really my
attempt to kind of try and create a robust footing for layout. And you’ll notice here that
I’ve not actually mentioned sort of Grid and Flexbox
as independent things. Because I think that by treating them as independent things, we’re
adding to this strange idea that when you pick
between Grid and Flexbox, it’s like choosing between
Bootstrap and Foundation. Instead, we need to find the fundamentals and teach the fundamentals. And while you’re doing
that, you can introduce an awful lot of Grid and
Flexbox along the way, because that’s how we can
demonstrate these things. But once people understand the underlying fundamental parts of the system, the things that tie together
the headline features of Flexbox and Grid, a
lot of the rest is really just learning syntax. So CSS has a system for layout. It’s how we allow webpages
and web applications and the main layout methods all belong to the display property. They’re essentially
just a value of display. If you want to do layout,
you are changing the value of display, so that’s really
the best place to start. What is display? And everything starts on
the web with Normal Flow, with block and inline layout. We’re always returning to that. And we need to understand
this is the default state of layout, the state to which we return if we don’t do anything else. Items that participate in
the block formatting context. We often talk about this
as kind of being no layout, but it’s layout, it’s
block and inline layout. Each box is a block
thing or an inline thing. And if you write some
HTML and just open it up in a web browser, there
it is, your HTML document defining a block formatting context, and the items inside participating in it. The block things do what block things do, and the inline things do
what inline things do. And we have some readable content, because CSS is doing
some work for us there, by way of the browser’s
inbuilt style sheet, before we actually write any CSS. And I think it’s pretty important for us to understand Normal Flow in this way, as actually a layout method. And it’s important for
us to teach it this way. Because right out of the gate, CSS is doing this stuff for us. We don’t need to define the way that every single HTML element looks. We don’t have to worry about things overlapping on our page. CSS is doing that for us. How fortunate are we to
have this amazing framework that gives us this great
starting point for our designs? And it’s very important that we work with it, not against it. If we strip everything away
with a heavy handed reset style sheet, then we’re losing
something really useful, something which is actually doing a bunch of our work for us. We have to end up putting
everything back in. So once we understand
that we’ve got layout, and our items are participating in the block format in
context, we better understand what it is to change the value of display, to create a different kind of layout. My items here are displaying one below the other as block items. If I change the value of display
on their container to flex, the items now display
alongside each other. They’re now flex items. They’re not participating in that block’s formatting context, they’re doing their own thing, they’re in a flex formatting context. And that comes with some initial values of the various flex properties. So our things here are displaying in a row by default because
that’s the initial value. They’re not stretching,
they’re all aligned to start, they’re not stretching on the main axis. So that’s kind of the basic values of those flex items. Now if I change the value to grid, the items now participate in
a grid formatting context. Now by default when you create a grid, you end up with a one column grid, so then we just get a single column grid, actually doesn’t look very different. And so we need to add
some column or row tracks to make something happen,
so here I’ve added three column tracks and so
I get a three column grid. But whether we say display grid or whether we say display flex, we’re only doing that on that element. It becomes the grid container
or the flex container, and its children become
grid or flex items. Their children go right
back to doing flow layout. And we can see that if
I add some more content to one of my grid items, a
header and two paragraphs, they go right back to flow layout. And so it goes all the way down through the structure of your site. You can stay with that flow layout, the block formatting
context, or you can switch to other formatting context. Inside that, you’re going
to return to flow layout unless you make that decision again and change the value of display. One box at a time all the way down. And once we’re thinking like this, it becomes much easier
to switch layout methods. If your flex display
isn’t kind of working out how you want it to, oh
well let’s try grid, let’s try display grid
and add some columns and have a look at that instead. Does that pattern work better? Does this work better for the thing that I’m trying to layout? We’re not seeing Grid
and Flexbox as these two different competing layout methods. They’re just values of display and we use the one that
works best for the type of content we’re trying to lay
out at this particular time. And it’s within display
that we see this refactoring of CSS in large. The display specification
now details two values for display, not one. We’re used to saying
things like display grid, display flex, with one value. The specification actually
breaks this down into two. So we have an outer display
type and an inner display type. The outer display type
is always block or inline and the inner display type is the one that the children use which
might be block or inline layout, it might be grid or flex. It might be something else yet undefined. So when we say display
grid, we’re really saying display block grid. The outer box of this element is a block, the children of this box are grid items. Or if we say display
flex, we’re really saying display block flex, create
me a block level box with flex children. We have what is now termed
in the specification, if you look at the specification,
what are they called? Legacy values of display, which things like
inline-grid and inline-flex, with a little hyphen in there. Now they would end up in our
two value world as display inline-flex and inline-grid. This currently just in the specification. I believe that Firefox have
started to implement this, but at the moment you can’t
actually use these two values of display on the web. But I think they’re very interesting in terms of how we think about display, how we think about the effect that changing display has on our content. So we think about our outer display type. That’s how does that box
behave in the layout? Is it a block box, is it an inline box? That’s gonna make a
difference to how it behaves amongst all of the other boxes that are in our layout. And then we have this inner display type. The formatting context
of the direct children. And that might be grid
or flex or what have you. But then there are things that behave a little bit differently to the things that are part of display. We have things which break out of flow. They break the chain. We can remove an element from flow and it stops doing this nice thing where we don’t have to worry about things overlapping
and hiding your content. Now the most obvious way to remove an item from normal flow, and
the one that if you asked a bunch of web developers how
to take an item out of flow, they would probably tell you
that it is to use position. To set something to position absolute. That will very obviously
take it out of Normal Flow. So we say position absolute,
and use the offset values and we take the item out of flow and position it. Now as I mentioned at
the start, by default CSS does not overlap your content. So you can put some stuff on a page. You don’t have to worry that things are gonna get hidden by other things. But the minute you start
to use positioning, you’re basically saying hey,
I am taking control here. I wanna take this thing
and I am gonna dump it on top of my content and
that’s absolutely fine. I’m gonna deal with the overlaps. So you’ve kinda taken control back the minute you start to
take things out of flow. It’s your responsibility
to make sure that your user can now read the rest of the content. And then there are floats. Which perhaps if you
aren’t someone who spends your life reading CSS specs,
they might not really seem to be an out of flow thing, because they appear in the
document pretty much where you expect them to appear. The text wraps around, but the
thing doesn’t get lifted up and dumped somewhere else,
it doesn’t overlap things. Or do they? If you’ve ever added a
background color to content wrapping a float, you see
they actually are out of flow. It’s the line boxes of the
content that become shortened in order to wrap round the thing, but the actual box is taken out of flow. There’s no space for it, and
so the thing that follows it just comes up behind
and its background color is shown behind the floated item. So again, we’ve got this
overlapping thing going on. And so here we can go back
and have another little look at the display specification
and to the value of flow-root. Our page establishes an initial
block formatting context. Sometimes written as a BFC if
you’re reading specifications. And that has some features Floats can’t poke out of the
bottom of that container. If this was the case, if they
could poke out the bottom, then a float could end
up essentially ending up outside of the viewport, if it was taller than the content, so we
know that doesn’t happen. And sometimes it might
be useful to create a new block formatting context
in the middle of our layout to say hey, this box
here, everything needs to stay inside it, the
floats, the margins, everything else should be
contained inside this box, they shouldn’t be getting out. And that’s what display flow-root does. It creates a new block formatting context just like the page. It contains everything inside
it, contains the floats. Now this actually is exactly
what you’ve been doing if you’ve ever used the overflow
property to contain floats. Because when you use
overflow you get a new block formatting context,
because you’re gonna maybe have scroll bars and you need everything to be inside that box when
you have your scroll bars. You can’t have things poking out of it. So when you use overflow you
create a new block formatting context everything stays in. That’s been a little bit of a hack to do this kind of float
containing behavior, with the occasional poor
effect of clipping your shadows or ending up with scroll bars where you weren’t wanting scroll bars. And also it being a little bit mysterious in your style sheet. Did the original developer
really want scroll bars? Or were they trying to do
this containing floats thing? And so now we have this
value of display flow-root that let’s you just say, hey, right here, new block formatting context. Let’s start over with a new
block formatting context, everything should stay inside this box. And then, I want to talk
about writing modes. Because when Flexbox and
Grid landed in our browsers, they did so in a way
that quietly introduced a kind of agnostic writing
mode way of working with the document. Everything that came
before Flexbox and Grid related to the physical
dimensions of the screen. So we talked about top right, bottom left for pretty much everything in CSS. We talk about horizontal
and vertical x and y. And when Flexbox and then Grid came along, we were asking people to
think about start and end, and the block and inline dimensions. And this line numbering which
is related to writing mode. And this was quite puzzling to people. They’re like, “Well why
can’t I just say left? “Because that’s what I’ve
always been doing in my designs. “Everything works according
to the screen dimensions.” And so these sort of concepts
that are in writing modes are critical to our
understanding of layout today. So before we do anything else, before we go do anything
more complicated with layout, we need to understand writing modes. We need to make sure that we
understand which way is block and which way is inline. So the block dimension is the direction in which blocks are
displayed down the page. So in English, that’s
language written horizontally, blocks are displayed vertically,
so one on top of the other. And the inline dimension is the dimension along which our words run in a sentence, so in English that’s left
to right horizontally. In Arabic that would be right to left. And these things relate
to our understanding of block and inline layout. Because inline boxes all
line up next to each other in the inline direction. So if we use a vertical writing mode, now the block dimension
is running horizontally, and the inline, vertically. So if you’ve been asked to think about start in the block
dimension or line one in grid, then this is the line at
which blocks would start. So in English that’s
at the top of the page. In a vertical RL, that
would be on the right. That’s your block start
where the blocks end, that’s block end. And if you need to think about start in the inline direction
or line one in grid, that’s where a sentence
begins in the writing mode that you’re currently using,
or that the element is using. So on the left for English,
on the right for Arabic. So this is inline start. And where your sentences
end, well that is inline end. And so here we find this
tension between the fact that our new layout methods
are pretty much agnostic, it doesn’t matter which
way up your grid is. Doesn’t matter which way
up your flex items are. And they refer to block and inline. Everything else is still
tied to physical dimensions. You set your margins, you do
it on top right, bottom left. You float things left. And as you try and build
something using a vertical writing mode, now that might
be because you’re working in a language that is set that way, but probably more likely for most of us is because we want to
do something creative and we thought well if we tip something on its side that’s gonna be pretty cool and we can play around with it. Now when you start doing that, this conflict becomes very apparent. So we should be able
to build a grid layout, as I’ve got a grid layout here. And I’ve got one of
the items there is just in horizontal writing mode and I’ve given it a width and a height. Now if we changed it to
a vertical writing mode, the actual grid layout
works absolutely fine, but you can see that the
dimensions are still tied to physical dimensions
because a width is a width. It doesn’t matter which
writing mode you’re in. So they don’t relate to
the logical dimensions of block or inline. They’re not related to
the flow of content. And so to solve this
problem we have a whole new CSS specification, logical
properties and values. It’s essentially a series of mappings saying hey, this is this
in the physical world, so in the logical flow
relative world, it is this. There are a huge number of these mappings, I know because I documented it for MDN so I created an awful
lot of pages for each of these different properties and values. So we’ve got one for
pretty much everything that is a physical sort of
property or value in CSS. So with the example I just showed you, instead of using width and
height we could use inline size and block size, which
then means when we tip our grid over it stays
with the same dimensions relative to the flow of the content. So our gridded component now can work in exactly the same way no matter which direction the writing mode is going. If I am working in vertical writing mode, I often build the thing the right way up, because it saves you having
your head on the side like this. And as long as you use
those logical properties and values you can do that,
you can just then tip it over. And so because we already
understand the block and inline dimensions
these names should start to make sense, the block
size property is the size in the block dimension, which is the horizontal writing mode, in if you’re in height. The inline size property is the
size in the inline dimension which in a horizontal
writing mode is width. If you turn the grid on
its side using writing mode the block and inline dimensions change, and therefore block size maps to width and inline size to height. This is incredibly
difficult to talk about. You see. (laughs)
(audience laughing) And it gets worse. Because we have all these
mappings for margin-block-start and margin-block-end defining
the top and bottom margins if you’re in a horizontal writing mode and then we will have margin-inline-start and margin-inline-end, would
be the inline-start and end, so that would be left and right if you’re in a horizontal writing mode. We have padding, and then
we even have border radius, which are my absolute favorites. (audience members chuckling) (audience member speaking quietly) Because you have things
like border top left radius, which is bad enough, so
that is your top left. So in a horizontal writing
mode of the left to right direction if you want that left corner you’re going to get
border-start-start-radius. Because it is the start of the inline and the start of the block dimension. Now, generally you probably
won’t be using those too often. We tend not to use the
long hands of border radius all that often, but yes,
they are my favorite for length if nothing else. But in terms of teaching
and understanding CSS, know that we are moving to this flow-relative, logical world. Browser support for these
mappings is getting very good. It’ll be a while before
we sort of feel happy to use them everywhere, but
in terms of teaching CSS, in terms of teaching CSS,
they’re really really important because this is how the
layout methods work. They expect we’re working
in this logical world. Grid and Flexbox make so much more sense when seen through a lens of writing modes. So once you start to
think about start and end, block and inline, everything
makes a lot more sense. Especially when you come
to a key specification, which is part of working
with Grid and Flexbox. Box alignment. In this specification
awful lot of what we do in Grid and Flexbox is pulled together. Box alignment deals
with obviously alignment and also space distribution between boxes. So alignment is defined for
all of our layout methods. And for flex and for
grid, but also for block and inline layout, which
means that we can have this consistent alignment
no matter what we do. Whichever method of display we’re using, we should be able to have
consistent alignment. And the reason that we needed
to talk about writing modes before we talk about alignment
is because everything we do in alignment worries
about these dimensions, the block and inline and start and end are how we do alignment. So when we talk about
alignment we need to talk about two things, we need to talk about the distribution
of space between items in a particular formatting context and we need to talk about
the alignment of items within the little area that they’re in. So they’re two different things that affect the alignment of content. Now the first, the distribution
of space around elements. Now I think that all of
alignment is much easier to teach people if you use
grid layout as an example. Because in grid we always
have the two dimensions. And from there you can
explain how it differs in other things. So if we have a grid here
with fixed size tracks, they’re not large enough
to fill the grid area, this orange box is the grid area. And that means that we’ve
got some spare space to play with. Now the tracks are all
aligned to start in their, in both dimensions, that’s
their initial values. So if I wanted to space things
out in the inline dimension, I use justify-content. If you’re in grid,
justify, it’s a bit like if you justify words in a line, so the justify properties always work in the inline dimension. If I wanted to space these
out in the block dimension, I would use align-content. So we have justify-content, space-between, and I’ve got the FireFox grid
inspector turned on there so you can kind of see
the spaces stretching out as we give space between our grid tracks in the inline dimension. In the block dimension
we’ll use align-content, and that again, will
be space distribution, but in the block dimension,
and this time I’ve aligned the content to end, so
all that spare space has been put before the
tracks and the tracks are then at the bottom. Now Flexbox is a bit different to Grid, because not only have we got the block and inline dimensions going on, we can actually change the axis can’t we? We can say we’ve got a main axis and a cross axis. So in Flexbox we justify on the main axis which by default will be row if you haven’t done anything else, which then is the inline dimension. So we justify on the main axis and align on the cross axis. So in flex justify-content is your main axis space distribution. So here we can say
justify-content flex-end and the spare space is
put before the items and they all go to the end. Align-content is our cross
axis space distribution between the flex lines so you
need to have more than one flex line and you need
to have some spare space, but then you can do
align-content space-around and that’s actually the
Firefox flex inspector, which is pretty new, which
gives you some information about your flex items their
spacing and sizing and so on. If you haven’t tried that
out it’s really worth playing around with if
you’re learning Flexbox or if you’re teaching Flexbox to someone else to have that visual understanding of what’s going on. And here is the question I am asked constantly and I have people reporting bugs to me with Flexbox and Grid saying, “This isn’t working, my
alignments not working.” It’s because they’ve
not got any spare space. If you’re using the
content properties you need to have spare space to distribute. If you have a tightly
packed grid container, a tightly packed flex container, if you don’t have multiple flex lines, you’re not gonna have
any space to distribute, and so they’re not going to do anything. This is very frequently reported to me. If you’re teaching people Flexbox and Grid that’s a good thing to point out. So then you have to align
your items inside your area. Again, much easier to understand in grid. I’ve got grid items here
they’re all displayed within their area and they’re stretched over different cells. The properties we need to use here are justify-self and align-self. Now the initial values for
those properties are stretch which means that the
thing that we tried to do for so long with floated layouts to have equal height columns
is the default behavior of our new layout methods,
which I kind of like. So it’s saying, yes you’ve always wanted to do this, so here now you
can just do it by default. You line things up they
will stretch to full height. Now the only time that we
don’t stretch things is for items which have an aspect ratio. So if say you have an
image as a grid item, it will be aligned to
start rather than stretch because generally you
don’t want your images to be stretched. You certainly don’t want that to happen if you weren’t expecting it. So to align on the inline
axis we again use the property which starts with justify. So justify-self end. On the first item aligns it to the end of the inline dimension. And on the block axis we’re
using the properties with align. So align-self end aligns it to the end on the block dimension. And we can set them all at once if we go to the grid container, we can say justify-items
end and align-items end and they go to the end. Switch into Flexbox and
we do not have a concept of justify-self on the main axis. The reason being that
there’s no area as in grid, we’re dealing with all of the items sort of as a group rather than individually. So this is where we see that the specification is
saying something different for a certain layout method. It’s saying, well this layout method, you can’t do both ways,
like you can on grid. So here you can’t use this property. So we can’t align individual items. We can however, align
them on the cross axis because you can move things up and down against each other on the cross axis if you’ve got extra space on that axis. Perhaps because you’ve got a
height on the flex container or you’ve got some taller items in that container making it taller. So align-self will align a single item. Align-items on the parents
will align them all. Now if you do need self alignment of items on the main axis, there is a way to do it. And it’s in the spec. You can use auto margins
to align a single item or group of items sorta separate
them out from the others. Because auto margins
absorb any available space in the dimension they are set in. It’s why you can center a
block with auto margins. You give it a margin left of
auto, a margin right of auto, it pushes the block into the middle. We’ve all been centering our
layouts like that forever. So if you apply an auto margin to a flex item it will take precedence over the justify-content alignment and kind of push the item over now. Now as we saw, this is
described in the specification. It’s not a hack, it’s not making
use of some weird behavior that someone noticed
once on Stack Overflow. And this leads me to another thing about talking about this stuff. Let’s stop calling
things a trick or a hack when we are literally using CSS the way it has been designed. Because if we go around
talking about this stuff as if it’s weird and quirky
then people assume the whole language is weird and quirky and that it’s just a series of hacks. And yes, it kind of has been, but it doesn’t need to be anymore. So when you’re talking about things that exist in the spec, show
people the specification. Say, “Here, this is a
real way to do things. “This is how it’s been designed.” And while we’re talking about design, there’s some interesting things that you find that have kind of come out of CSS working group discussions. And some of these things are things that we spent an awful
lot of time talking about. When we designed CSS, when we’re creating this layout system, we
want to prevent data loss. Right at the start I said, “You know, things don’t
overlap all over each other “when we lay things out in CSS.” You know, we try very hard
to keep your content visible on the page that’s really
important because actually if things go missing,
it’s hard to identify that something’s gone missing. If the button on your form has ended up behind another element,
you may not spot that. It’s really hard to spot that
something’s just not there. And people are like, “How
do I fill in this form? “There’s no button.” If it all just kind of overlays messily, you will probably see the messy overlay or at the very least your
customers will contact you and say, “You know, I’m using this browser “and everything’s all a mess.” Now at least you can go and fix it then, but they probably won’t identify that something has gone missing. So we tend to have visible
overflow if we have to. We don’t go around causing data loss and hiding your content. So alignment’s a situation
where you could get data loss. In some cases you could
align an item in such a way that it kind of pushes part of it off the edge of the viewport for example, out of the sort of scrollable
area that you’re working in. And so here I’ve got a stack
of flex items as column they’ve been aligned to center, one of them’s huge and so if it’s aligned to center it’s gonna get pushed
off the edge of the screen. You’re not gonna be able
to get to some of it. That would obviously be
suboptimal most of the time. So we’ve got these alignment
keywords, safe and unsafe. Use the unsafe keyword and
CSS will honor your alignment, even if that means something vanishes. If you’re it saying I
want unsafe alignment, you’re basically saying,
just like with position, “I would like this, I would like this “to work the way I’ve asked for it.” And it could be ’cause
you’ve got some plans for it. You’re using the fact that you can do that for some creative way or what have you. Now again, this isn’t a hacky system. These things have been
thought through and designed. And so then we have sizing. This is the specification
until very recently was known as the CSS intrinsic and
extrinsic sizing specification. I am not unhappy that I won’t have to say that on stage so often because it’s now being called box sizing. It defines how big
things are in our layout. And you might have noticed
that at no point so far, I’ve been talking about the box model. And this isn’t because I don’t think it’s kind of totally unimportant, I think it’s just far less
important than it used to be. And I say that as someone
who must have explained the box model in a different
way at least a hundred times across all of the writing that I’ve done, all of them with badly drawn diagrams. But when we had to control the size of each item in our layout, when we had to actually figure out how big everything was the box model was really really important. And also because we all know that until very recently the
size we gave our items wasn’t even the width
they took up on the screen once padding and borders and
so on, was taken into account. And I think it’s there that we need to introduce people to the box model. So this is kind of my quick
guide to the box model with added dev tools because that’s a really good way for
you to see what’s going on. Obviously everything in CSS is a box, but the block level box
is a very specific thing. Expands to fill the inline direction and it grows in the block dimension to the size of the content. And we can give it a
width and maybe a height. When we do, CSS has to decide what it is that we mean about that. It does that while taking
into account all the different bits of the box. So the box has the content, and we refer to that as the content box. You might then give it a bit of padding if you do that it’s added around the content and the
edge of this is referred to as the padding box. The box might also have a visible border. If you do then the size of this border is added to the outside of the padding and this is the border box. And the box also might have a margin and that’s then added to the outside of the border pushing things
away that are outside the box. And that defines the margin box. So if your box has a width or height or has an inline size and a block size, what is that size? Now, that size by default is the size of the content box so that’s the size of the box before you’ve added on your padding and your border. So the visible space
it takes up is added on to the size that you’ve given it. Now I think a lot of people
find that rather confusing. And so if you want the specified width to include padding and border
set the box sizing property to border box and then the visible thing you can see, so everything
other than the margin, that’s the width you’ve set. And that’s pretty much what people need to know about the box model. We’ve got keywords that allow us to toggle between the two different
ways of deciding sizing. Now do you want your size to
be the size of the content box? Do you want your size to be the size of the content plus the
padding plus the border? We don’t need to go into all the history at this point. This is what it is,
here’s how to change it. And then we can move on to far more useful things about sizing. Now how is sizing worked out across all of our new layout models? So in the past, everything
was pretty much a percentage or a length. You’ve given your box a fixed size, and in which case that’s
the size it’s going to get. Now, that’s how we’ve been doing layout. We’ve been giving things a size so that they would all
line up next to each other. We hope that that size doesn’t add up to more than 100%, because
if it does bad things start to happen, and as long as you know everything fits in the line, we kinda get something that
looks like a kind of grid. Now having to specify
everything in lengths and percentages and then doing the math to make them line up is
really the way of the past. Because our new layout methods
can do a lot of the work for us but to understand how they’re doing that we need to understand a few concepts. And the important things to understand, is what is the minimum
size of this content and what is the maximum
size of this content? Because once we know
those two things we’re in a pretty good place
to start understanding what the browser is doing when it works out the size
of any individual thing in our layout. And we’ve got some keywords, which they allow us to
actually size things in that minimum and maximum size so we can have a look at it. And so they’re a really
good place to start. If we have a two column grid, we’ve got our grid items there and the grid items contain
variable amounts of text. So the first column is set to min content and the second to max content. Now you can see that the
min content column has kind of got as small as it can without doing any overflows and so it’s soft wrapping
the items getting as small as it can do and then
that’s the size it gets to. That’s its min content size. You can use those keywords if you want to to size your grid tracks. Now the second column has
gone to max content size, which basically means that
because you’ve got text in there it’s sort of unraveled it’s all gone, it’s stretched out as long as it can. If you actually use max content in a grid layout like this, you could well cause an overflow. ‘Cause if you have a very very long bit of content in there
it’s just going to keep on going and end up poking out the box, poking out the side of the viewport. But that’s important to know. Things have got a max content size which they can try to go to. And so any content based sizing is going to be working itself
out based on these min and max content size. Working out how to
distribute space based on how big and how small the content is. And sort of understand
that, I think Flexbox is a really really good way to understand what’s going on there. So if I’ve got three items
in my flex container, now if we use the Flexbox initial values, they don’t grow to fill the space there’s enough room for them there, so they’re all going to
their max content size and they’re stopping as soon
as they’ve got to that size. They’re not adding on any
extra space that they need. Now if I give them flex auto, if you use flex auto things can grow and they can shrink from auto. So because they’ve all got an equal flex fire, they’ve all
got essentially flex one, they can all grow at the same rate. Now it looks there like we’ve got three equally sized items, but that’s only because they’ve got about the same amount of content. If we add more content to one
of the items you can see that that item is getting more space assigned, it’s taking up the space because it’s max content size is very big. But then once it kind of
gets to it all being full and it starts to wrap, it
starts to lose the space from its max content size and the content starts to wrap. And you see the small items, they also start to wrap down
to their min content size, but they’ll not go smaller than that. If you ended up with too much stuff it would just overflow. Or if you had flex wrap set to wrap it would then start to wrap. So that’s kinda, Flexbox
is doing this thing of looking at the min
and max content size. What it’s not doing is
looking at those things and saying well we need
three equal size items and therefore we’re gonna have lots of space around a small thing and push the big thing into a tiny box. If you actually do want that behavior and sometimes you do, then use flex one. That sets the flex basis to zero which basically says none of
these things has got any size, share all the space out accordingly. You then get your three
equally sized items. But the thing with Flexbox,
it’s kind of best used for stuff where you’ve got a bunch
of things of odd sizes and you’d just like the
browser to lay it out in the best way possible,
not put big things in small boxes and small
things in big boxes. Just have this kind of
squishy flexible sizing and it does that very very
well when used for that job. Now I’ve not talked yet
really about browser support. Now pretty much everything
I’ve talked about is available on at least one
browser if not more than one. But I think as well as talking
about how CSS is designed, and that it is a system,
we need to really rethink how we talk about browser support and explain CSS separately
from explaining you know, what is supported in what. And you might say, well what use is CSS that we actually can’t use? But stay with me for a moment. If we treat this as a system, it’s a system that’s been designed. We then have software that
implements this system. Now just like when you write
a specification of a piece of software that you’re building, sometimes you end up needing to release it without some of the features in your spec, because it’s still useful even without those things, but it doesn’t mean that
those things don’t exist or can’t exist. and it’s a kind of
understandable state of affairs. If we talk about the fact that yes, there are browsers that don’t support some of this stuff and yes
it’s probably coming. That’s understandable. We don’t have the problems
that we had in the past where browsers had sort of
implemented different things in wildly different ways. These days browsers do not want, they’re not to be interrupt. Nobody does, no one in the
CSS working group wants there not to be interrupt between browsers on any of these features. CSS is designed by a
group of representatives from those engines and no browser wants to be doing something different to what other browsers are doing. And yes, sometimes one engine lags behind on one feature or another. And yes, there are sometimes
bugs, you know who knew? Software gets bugs. Sometimes the browser’s implemented a spec prior to some major change
and it’s having to refactor it as we’re seeing with Firefox at the moment who are about to ship
the updated scroll snap. When they implemented an
earlier version of the spec. But none of this these days
is due to browsers kind of fighting out over CSS features. It’s due the fact that we do
have this iterative thing going on where we’re creating features. And these days we’ve
even got feature queries, the ability to say, “Hey browser
do you support this feature “before I try and use it or
shall I do something else?” We can fork our code accordingly. Now so another part of this system is this conditional logic. We’ve got media queries,
we’ve got feature queries, we can find out how big is this viewport? Is my user using a touchscreen? Does this browser support grid? We can ask these
questions, get the answers, do something in our code to
deal with it when we need to. And why is this important? Well as people who care about CSS and I imagine since you’re
sat in the CSS conference you do care to some degree about CSS, we need to stop talking
about it as this weird and quirky thing. In this room and coming after me are some of the people who have done an amazing job of refactoring CSS, of creating a cohesive and a sensible layout
system out of a language which is like no other because
it serves an environment in fact, multiple environments,
that are like no other. And just because it’s
designed for an environment that isn’t like any other doesn’t mean that we can’t teach it in a
robust and structured manner. We can give people the
skills to use the CSS of today the CSS, the CSS
that is coming tomorrow, and be able to learn to cope with the browsers of the
past where that is necessary. Those of us whose teach
CSS and that’s whether that’s within your team, answering
questions, writing books, or articles, speaking at conferences. Let’s change the way we’re
talking about the language. Don’t burden beginners with our history. Let’s keep the scars of the browser wars for our own reminiscing
and keep moving forward refactoring the way that we talk about CSS thank you. (audience applauding) – All right, would you come sit over here? Quick announcement before
we get started with the Q&A, some people are sitting in the stairs, but there’s still some seats
in the middle and whatnot. Everybody make sure to squeeze in, nobody will bite, it is
against the code of conduct, so that’s fine. All right, Rachel, wonderful talk. That was a lot of fun. I have one quick compliment and question. I saw a bunch of synchronized
tweets coming out from your account while you were talking. How did you do that? – They’re just in buffer. I know my timings. (laughs) – Oh man, that is extremely impressive. That was very good. – It’s very boring. (both laughing) – Still, it was nice to see it coming out. All right, first question,
one from a Peter Coose. Is flow-relative stuff
polyfillable via tools like PostCSS or anything like that? – I guess it is. And I think I have seen something. It’s not something I’ve tried myself. I think I have seen someone doing that. I mean they are just mappings,
so there’s no reason why not. I probably wouldn’t use them
particularly at the moment. I think it’s more
interesting that we have them as a concept at the moment. I think probably, I think
give us five, 10 years, I think that’s probably the default. So we’re probably use
flow-relatives by default unless we want to use something physical for whatever reason.
– Yeah. – I think it’s probably
a bit early at the moment to actually use ’em for everything. – Yeah. A question from my own heart too, because I went through
learning how to do CSS layout back in the terrible days
of float base layout. What are the most
important things to unlearn from your own knowledge right now, to act well in today’s
modern CSS Layout world? – Sizing. Typically when people start to learn Grid or Flexbox they try and size
everything in percentages. And don’t look at everything else and then are confused
by things which are kind of using content based sizing. So something like the FR unit in grid. Because everyone is so used to the fact they have to have control over sizing. And I think like with Flexbox, sometimes just letting it get on with it, letting it do its thing. You’ll get a good layout. But we’re not used to that. And I think that takes people a while. Interestingly, when I
teach complete beginners, they get Grid and Flexbox
really really quickly. When I teach people who’ve been doing CSS for 10 years, they’re like, “Ahh! This is all terrible! “So much of it is all new,
I don’t understand any “of it at all.” So yeah actually I think that what we have is very understandable,
but we’ve got these layers and layers of history to break through. – It’s so good to hear
that that stuff is easy for new people to learn, that’s great. Let’s, here, bah bah bah. Quick question about viewport units. Currently the main ones
we use are VW and VH, which are clearly not
writing mode agnostic. Do we have any plans for
writing mode relative versions of the viewport units? – I don’t actually know.
You might know, do you? – I do actually know.
– You. (laughs) (audience laughing) – The VI and VB units do exist, – Of course, yes.
– For viewport inline, – Yes they do.
– And viewport block. Yeah. So those’ll be around, you
also have Vmin and Vmax if you just wants the
smallest and largest ones. Those work everywhere. Uh, bah bah bah. So you’ve talked about
teaching new layout modes and whatnot, so when we
are teaching new people, what do you suggest a starting point is? Should we start with grid
before we go into flow, or should we start with flow
and then do larger things? – Absolutely start with flow. I think the order in which
I’ve gone through things today is kind of where I am ending up reordering my own teaching of stuff. I have lots of spreadsheets
of what has worked and what doesn’t, for when
I’ve been teaching people. All the questions that I get. And I’ll be like, why are people asking me that question at that point? And then I kind of reorder
stuff and try it again. And so yeah, I think that
just starting from the fact that hey, we have layout here. And then what do you wanna change about that layout, rather
than fighting against it. I think a lot of the time,
particularly with grid, people are fighting
against the order of things in the document. And realizing that actually you don’t need to change very much and you get layout, I think is quite a nice way to work. – Okay. One final question then. While you rightly rail against talking about normal CSS as being cute hacks or anything like that,
dealing with legacy browsers, we still do have to deal
with a lot of hacks. So what’s your like suggestion to help us to talk about that and help us to deal with the reality that we
still have a lot of CSS hacks that we need to deal with? – I think when you’re dealing with that from a basis of I understand CSS, I understand how things should work, and okay, the world isn’t perfect. So from that starting
point, what do I need to do to get something which
works reasonably well in IE9 or whatever? So I have a product which
fairly recently still supported IE9, so I know the pain. I certainly don’t live in an ivory tower. I do real web development. So, but I think that if you’re starting from a level of I understand
how this should be, then, and particularly if
you’re working component by component actually fixing
the things in older browsers becomes an awful lot less of a problem. What is difficult is
when you don’t understand what’s going on, you’re just
kind of poking things around and hoping that it will work. That’s not a good position to work from. But if you work from this
is a sensible system, sometimes you need to do these things for these old browsers that haven’t yeah, caught up with the times yet. That’s easier to cope with I think. – All right, thank you very much Rachel. (audience applauding)