Bootstrap.A11y 1.1.0

Tie.Controls.Bootstrap

A collection of accessible Twitter Bootstrap v3.3.7 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!

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Installing the Package

Just open your Visual Studio and in Tools > Nuget > Package Manager Console write follow line

Install-Package Tie.Controls.Bootstrap

See more informations here: https://www.nuget.org/packages/Tie.Controls.Bootstrap/

Registering the Controls

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="Tie.Controls.Bootstrap" assembly="Tie.Controls.Bootstrap" />
        </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.

Configuration

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.

Deployment

When deploying to a server, only the Tie.Controls.Bootstrap.dll file is needed.

Documentation

HTML documentation is available within the project's [Help folder](Help). This documentation is generated using Sandcastle Help File Generator.

Some Examples of Usage

The Samples project provides additional examples based on the Bootstrap v3.3 documentation. Simply open and run the project on your local machine.

Page Header

<twt:PageHeader ID="PageHeader1" runat="server" Title="Heading" />

Labels

<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" />

Badges

<twt:Badge ID="Badge1" runat="server" Text="42" />

Button Groups

<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>

Toolbars

<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>

ProgressBars

<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" />

Alerts

<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>

Authors

• Pedro Fernandes - Initial work - pmcfernandes
• Kinsey Roberts - Accessibility overhaul - kinzdesign for Weatherhead School of Management

License

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.