development in drupal configuration and · 2020-01-01 · go somewhere else this session is not for...
TRANSCRIPT
![Page 1: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/1.jpg)
Basics of Accessible Configuration and Development in DrupalMichael Wayne HarrisYale University [email protected]
![Page 2: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/2.jpg)
Is my site accessible?
![Page 3: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/3.jpg)
Is my site [email protected]
![Page 4: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/4.jpg)
Outline
● Go somewhere else● What Is Accessibility?● Preparing for Development● Configuring Entities● Conclusions
![Page 5: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/5.jpg)
Go Somewhere Else
![Page 6: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/6.jpg)
Go Somewhere Else
This session is not for you
● You should know HTML very well● You should be a YaleSites / Drupal super user● You should use be comfortable inspecting the DOM● You should have a strong hatred of the markup that Drupal outputs by
default
![Page 7: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/7.jpg)
![Page 8: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/8.jpg)
Go Somewhere Else
No seriously, this session is not for you
● I talk fast● I go through my slides fast● I don’t stop for questions
![Page 9: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/9.jpg)
You won’t hurt my feelings.
![Page 10: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/10.jpg)
Go somewhere else
Other sessions happening right now
● Image Annotations Using Drupal and Mirador - 203
● YaleSites: Building for the User - 202
![Page 11: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/11.jpg)
What Is Accessibility
![Page 12: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/12.jpg)
What Is Accessibility
Usability for People with Disabilities
● Blindness● Color blindness● Low Vision● Deafness● Motor Disabilities● Cognitive Disabilities
![Page 13: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/13.jpg)
What Is Accessibility
Adherence to a Technical Standard
● Section 508● WCAG 2.0● ATAG 2.0 Part B
![Page 14: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/14.jpg)
What Is Accessibility
A Civic Responsibility
● Human Rights● Civil Rights● Participation in Government in Civics● Participation in Business and Commerce● Participation in the Workforce● Participation in Education● Participation in Social Media
![Page 15: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/15.jpg)
Preparing for Development
![Page 16: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/16.jpg)
Preparing for Development
● Understanding of Accessible Development Principles● Planning for Accessibility
![Page 17: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/17.jpg)
The foundation of accessibility is semantic markup
![Page 18: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/18.jpg)
Semantic Markup
● div and span are a last resort● True headings (h1, h2, h3, h4, h5, h6), vs strong● Semantic HTML and HTML5 (header, footer, nav, aside, figure)● The difference between a and button● The proper use of label● Every img tag must have an alt attribute, but sometimes it must be null
![Page 19: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/19.jpg)
Planning for Accessibility
● Annotate all of your designs before you begin coding
○ Focus on semantics
○ Focus on source order
○ Ignore wrappers, ids, class names, etc
● HTML prototypes are even better
![Page 20: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/20.jpg)
![Page 21: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/21.jpg)
<article> <h2><a>Trump’s military spending…</a></h2> <img alt /> <!-- NULL ALT ATTRIBUTE --> <p>The agencies president trump proposes... </p> <footer> <ul> <li><a>Christopher Ingraham</a></li> <li><a>Data visualization</a>,<a>Economy</a> <li>3 hours ago</li> </ul> </footer></article>
![Page 22: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/22.jpg)
Configuring Drupal Modules
![Page 23: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/23.jpg)
Configuring Default Field Output
Default Field Output:
1. Field Wrapper2. Field Label3. Field Items Wrapper4. Field Item Wrapper
![Page 24: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/24.jpg)
Configuring Default Field Output
<div class=”field field-name-field-myfield”>
<div class=”field-label”>My field Label</div>
<div class=”field-items”>
<div class=”field-item”>My input</div>
</div>
</div>
![Page 25: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/25.jpg)
![Page 26: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/26.jpg)
<div class=”field field-name-field-favorite-foods”>
<div class=”field-label”>Favorite Foods</div>
<div class=”field-items”>
<div class=”field-item”>Pulled Pork</div>
<div class=”field-item”>Mac and Cheese</div>
<div class=”field-item”>Sweet Tea</div>
</div>
</div>
![Page 27: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/27.jpg)
<div class=”field field-name-field-favorite-foods”>
<div class=”field-label”>Favorite Foods</div>
<div class=”field-items”>
<div class=”field-item”>Pulled Pork</div>
<div class=”field-item”>Mac and Cheese</div>
<div class=”field-item”>Sweet Tea</div>
</div>
</div>
NOT
SEMA
NTIC
![Page 28: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/28.jpg)
<h2>Favorite Foods</h2>
<ul>
<li>Pulled Pork</li>
<li>Mac and Cheese</li>
<li>Sweet Tea</li>
</ul>
![Page 29: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/29.jpg)
<h2>Favorite Foods</h2>
<ul>
<li>Pulled Pork</li>
<li>Mac and Cheese</li>
<li>Sweet Tea</li>
</ul> HOOR
AY
![Page 30: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/30.jpg)
Configuring Default Field Output
Needed Configuration
● Display Suite Module● Display Suite Extras Module● Display Suite UI Module● Structure > Display Suite > Display Suite Extras > Enable Field Templates
![Page 31: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/31.jpg)
Configuring Field Groups
What if I need to wrap one or more fields in a custom wrapper?
E.g. image field + caption field = <fieldgroup>
![Page 32: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/32.jpg)
![Page 33: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/33.jpg)
<div class=”field field-name-field-img”><div class=”field-items”>
<div class=”field-item”><img src=”...” /></div></div>
</div>
<div class=”field field-name-field-image-caption”><div class=”field-items”>
<div class=”field-item”>Michael's girlfriend thinks Versailles is more interesting than he is</div>
</div></div>
![Page 34: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/34.jpg)
<div class=”field field-name-field-img”><div class=”field-items”>
<div class=”field-item”><img src=”...” /></div></div>
</div>
<div class=”field field-name-field-image-caption”><div class=”field-items”>
<div class=”field-item”>Michael's girlfriend thinks Versailles is more interesting than he is</div>
</div></div>
NOT
SEMA
NTIC
![Page 35: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/35.jpg)
<figure>
<img src=”...” />
<figcaption>Michael's girlfriend thinks Versailles is more interesting than he is</figcaption>
</figure>
![Page 36: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/36.jpg)
<figure>
<img src=”...” />
<figcaption>Michael's girlfriend thinks Versailles is more interesting than he is</figcaption>
</figure>
HOOR
AY
![Page 37: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/37.jpg)
Configuring Default Field Output
Needed Configuration
● All of the earlier Display Suite stuff● Fieldgroups
![Page 38: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/38.jpg)
In Conclusion
● The foundation of accessibility is semantic markup● Display suite extras + custom field templates!● Display suite can also be used for field collections, paragraphs, users,
taxonomy terms, … any entity!● Field groups to add custom wrappers to multiple fields
![Page 39: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/39.jpg)
Go Further
● Theme functions● Field formatters● Preprocess functions● tpl.php files
![Page 40: Development in Drupal Configuration and · 2020-01-01 · Go Somewhere Else This session is not for you You should know HTML very well You should be a YaleSites / Drupal super user](https://reader034.vdocument.in/reader034/viewer/2022050121/5f518c7bb794d5597a26edae/html5/thumbnails/40.jpg)
[email protected]://usability.yale.eduhttp://[email protected]