A collection of accessible [Twitter Bootstrap v3.4.1(https://github.com/twbs/bootstrap/tree/v3.4.1) user controls for ASP.NET. It's easy to forget to add ARIA attributes and other accessibility markup. With these controls, it's all handled for you!
This project add features additional controls and accessibility markup. Care has been taken to maintain backwards compatibility, making the transition from Tie.Controls.Bootstrap to Bootstrap.A11y as smooth as possible.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Just open your Visual Studio and in Tools > Nuget > Package Manager Console write follow line
Install-Package Bootstrap.A11y
See more informations here: https://www.nuget.org/packages/Bootstrap.A11y/
Add the following entry to your root web.config file. This registers the controls for use anywhere on your site with the twt: prefix:
<system.web>
<pages>
<controls>
<add tagPrefix="twt" namespace="Bootstrap.A11y" assembly="Bootstrap.A11y" />
</controls>
</pages>
</system.web>
If you only want the Bootstrap controls to be available in part of your website, you can add the above entry to a non-root web.config file.
If you want a different tag prefix than twt:, edit the entry accordingly.
By default, the CSS and JavaScript of the PayPal Bootstrap Accessibility Plugin are added to the page (using embedded resources and ClientScriptManager) when any of the following controls are added to a page:
- Alert
- Dropdown
- Carousel
- Modal
- TabControl
This behavior can be modified in the appSettings section of your root web.config file:
If you are already including the Bootstrap Accessibility Plugin CSS and/or JS in your site, you can disable the ClientScriptManager injection by adding one or both of the following settings:
<add key="Bootstrap.InjectA11yCss" value="False" />
<add key="Bootstrap.InjectA11yJs" value="False" />
Alternatively, if you don't want either injected, you can use this setting instead:
<add key="Bootstrap.AccessibilityPlugin" value="None" />
If you prefer to use jongund's modified version of the PayPal Bootstrap Accessibility Plugin, you can add this setting:
<add key="Bootstrap.AccessibilityPlugin" value="JonGund" />
Note: The value of Bootstrap.AccessibilityPlugin should be the same across the site. Changing the value in a child web.config file will lead to unexpected results as the value is loaded from configuration once and stored in a static property.
When deploying to a server, only the Bootstrap.A11y.dll file is needed.
HTML documentation is available within the project's docs folder. This documentation is generated using Sandcastle Help File Generator.
The Samples project provides additional examples based on the Bootstrap v3.3 documentation. Simply open and run the project on your local machine.
<twt:PageHeader ID="PageHeader1" runat="server" Title="Heading" />
<twt:Label ID="Label1" runat="server" Text="Label Message" LabelType="Default" />
<twt:Label ID="Label2" runat="server" Text="Label Message" LabelType="Primary" />
<twt:Label ID="Label3" runat="server" Text="Label Message" LabelType="Success" />
<twt:Label ID="Label4" runat="server" Text="Label Message" LabelType="Info" />
<twt:Label ID="Label5" runat="server" Text="Label Message" LabelType="Warning" />
<twt:Label ID="Label6" runat="server" Text="Label Message" LabelType="Danger" />
<twt:Badge ID="Badge1" runat="server" Text="42" />
<twt:ButtonGroup ID="ButtonGroup1" runat="server">
<Buttons>
<twt:Button ID="Button2" runat="server" Text="Left" />
<twt:Button ID="Button3" runat="server" Text="Center" />
<twt:Button ID="Button4" runat="server" Text="Right" ButtonType="Inverse" />
</Buttons>
</twt:ButtonGroup>
<twt:ButtonGroup ID="ButtonGroup6" runat="server" Toolbar="true">
<Buttons>
<twt:ButtonGroup ID="ButtonGroup7" runat="server">
<Buttons>
<twt:Button ID="Button17" runat="server" Text="1" />
<twt:Button ID="Button18" runat="server" Text="2" />
<twt:Button ID="Button19" runat="server" Text="3" />
<twt:Button ID="Button20" runat="server" Text="4" />
</Buttons>
</twt:ButtonGroup>
<twt:ButtonGroup ID="ButtonGroup8" runat="server">
<Buttons>
<twt:Button ID="Button21" runat="server" Text="5" />
<twt:Button ID="Button22" runat="server" Text="6" />
<twt:Button ID="Button23" runat="server" Text="7" />
</Buttons>
</twt:ButtonGroup>
<twt:ButtonGroup ID="ButtonGroup9" runat="server">
<Buttons>
<twt:Button ID="Button24" runat="server" Text="8" />
</Buttons>
</twt:ButtonGroup>
</Buttons>
</twt:ButtonGroup>
<twt:ProgressBar ID="ProgressBar3" runat="server" Value="40" ProgressBarStyle="Success" />
<twt:ProgressBar ID="ProgressBar4" runat="server" Value="20" ProgressBarStyle="Info" />
<twt:ProgressBar ID="ProgressBar5" runat="server" Value="60" ProgressBarStyle="Warning" />
<twt:ProgressBar ID="ProgressBar6" runat="server" Value="80" ProgressBarStyle="Danger" />
<twt:Alert ID="Alert1" runat="server" Dismissible="false" AlertType="Success">
<Content>
<p>Well done! You successfully read this important alert message.</p>
</Content>
</twt:Alert>
- Pedro Fernandes - Initial work - pmcfernandes
- Kinsey Roberts - Accessibility overhaul - kinzdesign for Weatherhead School of Management at Case Western Reserve University
The code in this project is licensed under the GNU General Public License - see the LICENSE file for details.
The documentation in the Samples project is adapted from the Bootstrap team's version 3.3.7 documentation under the CC BY 3.0 license and is released under the same CC BY 3.0 license.